Next.jsでブラウザーのエラーをコンソールに表示する

browserDebugInfoInTerminalを有効にすることでブラウザのConsole Errorをターミナルに表示することができます。

next.config.tsに設定します。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  experimental: {
    browserDebugInfoInTerminal: true,
  }
};

export default nextConfig;

テストコード

export default function Home() {
  return (
    <div>
      <main>
        {[1,2,3].map(num => (
          <div key={1}>
            number: {num}
          </div>
        ))}
      </main>
    </div>
  );
}

実際のエラーメッセージ

[browser] Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. 
    at <unknown> (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4127:33)
    at runWithFiberInDEV (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:959:74)
    at warnOnInvalidKey (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4126:21)
    at reconcileChildrenArray (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4152:160)
    at reconcileChildFibersImpl (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4259:117)
    at <unknown> (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4286:39)
    at reconcileChildren (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:5908:51)
    at beginWork (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:6739:1573)
    at runWithFiberInDEV (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:959:74)
    at performUnitOfWork (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:9487:97)
    at workLoopConcurrentByScheduler (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:9483:58)
    at renderRootConcurrent (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:9466:71)
    at performWorkOnRoot (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:8993:150)
    at performWorkOnRootViaSchedulerTask (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:10155:9)
    at MessagePort.performWorkUntilDeadline (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_ff1f0a95._.js:2647:64)
    at div (<anonymous>)
    at <anonymous> (about://React/Server/file:///Users/xxxxxxxxxxx/etest/.next/dev/server/chunks/ssr/%5Broot-of-the-server%5D__9b907a50._.js?2:36:297)
    at Array.map (<anonymous>:1:18)
    at Home (about://React/Server/file:///Users/xxxxxxxxxxx/etest/.next/dev/server/chunks/ssr/%5Broot-of-the-server%5D__9b907a50._.js?3:36:15) (file:///Users/xxxxxxxxxxx/etest/.next/dev/static/chunks/a8105_next_dist_compiled_react-dom_86ab958b._.js:4127:33)