発行:2026-01-02

特殊ファイル (Special Files)

Next.js App Router では、page.tsx 以外にも、特定の名前を付けることで特別な役割を果たすファイル群（ Special Files ）があります。
これらを使いこなすことで、リッチなユーザー体験（UX）を簡単に実装できます。

1. layout.tsx (レイアウト)

ページ共通のデザイン（ヘッダー、フッター、サイドバーなど）を定義するためのファイルです。
layout.tsx は、そのディレクトリ配下のすべてのページに適用されます（ネスト可能）。

src/app/layout.tsx// ルートレイアウト（必須）
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        <main>{children}</main>
        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

例えば src/app/dashboard/layout.tsx を作れば、ダッシュボード以下のページだけに別のレイアウトを適用することもできます。

2. loading.tsx (ローディング)

ページの内容を読み込んでいる間（Suspense）、自動的に表示されるコンポーネントです。
React Suspense を裏側で使っており、非同期データの取得中などに「読み込み中...」やスピナーを表示できます。

src/app/loading.tsxexport default function Loading() {
  // スケルトンスクリーンやスピナーを表示
  return <div className="text-center p-4">Loading...</div>;
}

これを置くだけで、画面遷移時の白い画面（ホワイトアウト）を防ぎ、ユーザーに処理中であることを伝えられます。

3. error.tsx (エラーハンドリング)

ページで予期せぬエラーが発生した時に、アプリ全体がクラッシュするのを防ぎ、代わりに表示されるエラー画面です。 必ず Client Component ("use client") である必要があります。 ```tsx:src/app/error.tsx
"use client"; // 必須

import { useEffect } from "react";

export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error);
}, [error]);

return (
<div className="p-4 bg-red-50 text-red-500">
<h2>エラーが発生しました</h2>
<button onClick={() => reset()}>もう一度試す</button>
</div>
);
}


## 4. not-found.tsx (404ページ)

存在しないURLにアクセスされた時に表示されるページです。
`notFound()` 関数を実行した時にも表示されます。

```tsx:src/app/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <div className="text-center p-10">
      <h2>ページが見つかりません</h2>
      <p>お探しのページは削除されたか、URLが間違っている可能性があります。</p>
      <Link href="/">トップへ戻る</Link>
    </div>
  );
}

まとめ

Next.js では、「仕組み」を自分で一から作るのではなく、「 決められたファイル名でコンポーネントを置くだけ 」で、高度な機能が使えるようになっています。

layout.tsx : 共通デザイン
loading.tsx : 読み込み中の表示
error.tsx : エラー時の表示
not-found.tsx : 404ページ

これらを活用して、ユーザーに親切なアプリケーションを作りましょう。