TL;DR
App Router の app ディレクトリに置く特別なファイルの 1 つ。page.tsx を包む Error Boundary コンポーネントのフォールバックとして表示される。
仕組み
Error Boundary コンポーネントは自動で挿入される。layout.tsx はその外側（親の階層）に位置するので、layout.tsx で発生した例外は、1 つ上の階層の error.tsx で捕捉される。
<Layout>
<ErrorBoundary fallback={<Error />}>
<Suspense>
<Page />
</Suspense>
</ErrorBoundary>
</Layout>例
他の特別なファイルと違い、Client Component として定義する必要がある。
"use client"
import { useEffect } from "react"
export default function Error({ error, reset }) {
useEffect(() => console.error(error), [error])
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
)
}自分の理解
拡張子は .jsx（.js）でもよい。