Next.js 13以降の app/ ディレクトリ。フォルダ名がURLパスに対応し、特定のファイル名が特別な役割を持つ。
// ── App Router のフォルダ・ファイル構造 ─────────────────
// next.js 13 以降の新しいルーティング方式
app/
├── layout.tsx # ルートレイアウト（全ページ共通のUI）
├── page.tsx # / のページ（トップページ）
├── loading.tsx # / のローディング中に表示するUI
├── error.tsx # / でエラー発生時に表示するUI
├── not-found.tsx # 404ページ
│
├── blog/ # /blog ルート
│ ├── page.tsx # /blog のページ
│ └── [slug]/ # /blog/:slug の動的ルート
│ ├── page.tsx # /blog/my-post などの記事詳細ページ
│ └── layout.tsx # /blog/:slug 配下のレイアウト
│
└── dashboard/ # /dashboard ルート
├── layout.tsx # ダッシュボード専用のレイアウト
├── page.tsx # /dashboard のページ
└── settings/ # /dashboard/settings
└── page.tsx # /dashboard/settings のページ
// ── 命名規則まとめ ────────────────────────────────────────
// page.tsx → そのパスのページコンポーネント（必須）
// layout.tsx → 子ページをラップする共通UI（ナビゲーションなど）
// loading.tsx → Suspenseのフォールバック（自動適用）
// error.tsx → エラーバウンダリ（自動適用）
// route.ts → APIエンドポイント（GET/POST などを export）フォルダ名を (marketing) のように () で囲むと URLに影響しない「ルートグループ」になる。複数のレイアウトを使い分けたい場合に便利。