第3章: App Routerのアーキテクチャ — ルーティングとレイアウトシステム

app/
├── layout.tsx          # ルートレイアウト（必須）
├── page.tsx            # / のUI
├── about/
│   └── page.tsx        # /about のUI
├── blog/
│   ├── layout.tsx      # /blog 以下の共通レイアウト
│   ├── page.tsx        # /blog のUI（記事一覧）
│   └── [slug]/
│       └── page.tsx    # /blog/:slug のUI（記事詳細）
└── dashboard/
    ├── layout.tsx      # /dashboard 以下の共通レイアウト
    ├── page.tsx        # /dashboard のUI
    └── settings/
        └── page.tsx    # /dashboard/settings のUI

// app/blog/[slug]/page.tsx
// Next.js 15以降、paramsはPromiseとして渡される

type Props = {
  params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  )
}

// 静的生成する場合はgenerateStaticParamsを定義
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

app/dashboard/
├── layout.tsx           # @team と @analytics を受け取る
├── page.tsx             # /dashboard のメインUI
├── @team/
│   ├── page.tsx         # チーム情報スロット
│   └── default.tsx      # フォールバック（Next.js 16で必須）
├── @analytics/
│   ├── page.tsx         # アナリティクススロット
│   └── default.tsx      # フォールバック（Next.js 16で必須）
└── default.tsx          # childrenスロットのフォールバック

// app/dashboard/layout.tsx
// スロットはlayoutのpropsとして受け取る

export default function DashboardLayout({
  children,      // page.tsx の内容（暗黙のスロット）
  team,          // @team/page.tsx の内容
  analytics,     // @analytics/page.tsx の内容
}: {
  children: React.ReactNode
  team: React.ReactNode
  analytics: React.ReactNode
}) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div>{children}</div>
      <div>{team}</div>
      <div>{analytics}</div>
    </div>
  )
}

// 写真ギャラリーでのIntercepting Routes + Parallel Routes
app/
├── layout.tsx
├── @modal/
│   ├── (..)photo/[id]/    # /photo/:id をインターセプト
│   │   └── page.tsx       # モーダルとして表示
│   └── default.tsx        # モーダル非表示時
├── gallery/
│   └── page.tsx           # 写真一覧
└── photo/
    └── [id]/
        └── page.tsx       # 直接アクセス時のフルページ表示

app/
├── (marketing)/          # URLには /marketing は含まれない
│   ├── layout.tsx        # マーケティングページ専用レイアウト
│   ├── about/
│   │   └── page.tsx      # /about
│   └── pricing/
│       └── page.tsx      # /pricing
├── (dashboard)/          # URLには /dashboard は含まれない
│   ├── layout.tsx        # ダッシュボード専用レイアウト（認証付き）
│   ├── overview/
│   │   └── page.tsx      # /overview
│   └── settings/
│       └── page.tsx      # /settings
└── layout.tsx            # ルートレイアウト

// loading.tsx — Suspenseフォールバックとして自動的にラップされる
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-700 rounded w-1/3 mb-4" />
      <div className="h-4 bg-gray-700 rounded w-full mb-2" />
      <div className="h-4 bg-gray-700 rounded w-2/3" />
    </div>
  )
}

// error.tsx — ErrorBoundaryとして自動的にラップされる
// 必ず 'use client' が必要（Error Boundaryはクライアントコンポーネント）
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>エラーが発生しました</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>再試行</button>
    </div>
  )
}

// proxy.ts（プロジェクトルートに配置）
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  // 認証チェック
  const token = request.cookies.get('session-token')
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  // i18nリダイレクト
  const locale = request.headers.get('accept-language')?.split(',')[0] || 'ja'
  if (request.nextUrl.pathname === '/') {
    return NextResponse.redirect(new URL('/' + locale, request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}