App Routerで特定の意味を持つ予約済みファイル名。これらのファイルを配置することで自動的に特定の機能が有効になる。
// layout.tsx — 子ページをラップする共有UI
export default function Layout({ children }: { children: React.ReactNode }) {
return <div className="container">{children}</div>;
}
// loading.tsx — ページ読み込み中に表示（Suspense境界を自動設置）
export default function Loading() {
return <div>読み込み中...</div>;
}
// error.tsx — エラー発生時に表示（Error Boundary を自動設置）
'use client'; // error.tsx は Client Component が必要
export default function Error({ error, reset }: {
error: Error;
reset: () => void;
}) {
return (
<div>
<p>エラー: {error.message}</p>
<button onClick={reset}>再試行</button>
</div>
);
}
// not-found.tsx — notFound() を呼んだときや404のUI
export default function NotFound() {
return <h2>ページが見つかりません</h2>;
}layout.tsxは再レンダーされないため状態を保持できる。page.tsxはURLに対応する実際のコンテンツ。loading.tsxはStreaming SSRと連携して部分的な読み込み表示に使われる。