TL;DR
Next.js の App Router で、app/ ディレクトリ直下に置くファイル。error.tsx で扱われなかった例外が起きたときに、エラーを伝える UI を表示する。
仕組み
error.tsx と同じく、例外が起きたときにエラーを伝える UI を提供する。アプリケーション全体を置き換えて表示されるので、<html> と <body> を自分で持つ必要がある。また、Client Component として定義する必要がある。
例
"use client"
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}注意点
本番環境でしか動かない。開発環境では、代わりに Next.js のエラーオーバーレイが表示される。
global-error.js is only enabled in production. In development, our error overlay will show instead.
拡張子は .tsx でなくてもよく、.jsx や .js でもよい。