Next.js App Routerとは何か｜Pages Routerとの違い
Next.js 13で導入され、Next.js 14・15で安定版となったApp Routerは、Reactの最新機能（Server Components・Server Actions・Streaming等）を活用したNext.jsの新しいルーティングシステムです。
| 機能 | App Router | Pages Router |
|---|---|---|
| レンダリング | Server Components がデフォルト・JS バンドル削減 | クライアント中心 |
| Server Actions | サーバ関数を直接呼べる（API Route不要） | API Route 経由が必要 |
| レイアウト | layout.tsx で階層的に管理 | _app.tsx 一枚 |
| ローディング/エラー | loading.tsx / error.tsx で宣言的 | 手動実装 |
| Streaming/Suspense | 段階的UIストリーミング | 標準で対応せず |
App Routerのディレクトリ構造
App Routerの規約ベースのファイル構造を解説します。
appディレクトリの基本構造：
app/layout.tsx（ルートレイアウト・必須）
app/page.tsx（ルートページ /）
app/about/page.tsx（/about ページ）
app/blog/[slug]/page.tsx（動的ルート）
app/api/users/route.ts（API Route）
| ファイル | 役割 |
|---|---|
| layout.tsx | 共通レイアウト（親から子に継承） |
| page.tsx | ルートのUIコンポーネント |
| loading.tsx | ローディングUI（React Suspense自動適用） |
| error.tsx | エラーUI（Error Boundary） |
| not-found.tsx | 404 ページ |
| template.tsx | 毎回再レンダリングされるレイアウト |
Server ComponentsとClient Componentsの使い分け
App Routerで最も重要な概念がServer ComponentsとClient Componentsの使い分けです。
| 区分 | 使う場面 |
|---|---|
| Server（デフォルト） | DB直接アクセス・APIキー扱い・大きなライブラリ・SEO 静的コンテンツ |
| Client（'use client'） | useState/useEffect・onClick/onChange・localStorage/window・リアルタイム状態 |
重要な原則：Serverコンポーネントの中にClientコンポーネントを入れることはできますが、逆（ClientコンポーネントにServerコンポーネント直接インポート）はできません。ただしchildrenとしてpropsで渡すことは可能です。
データフェッチとキャッシュ戦略
App Routerのデータフェッチとキャッシュ戦略を解説します。
Server Componentでのデータフェッチ：
fetch APIを直接Server Component内で使うことで、自動的にキャッシュが機能します。
| オプション | 挙動 | 用途 |
|---|---|---|
| cache: 'force-cache' | 常にキャッシュ（デフォルト） | 変化しないデータ・SSG的 |
| cache: 'no-store' | 毎回フェッチ（キャッシュなし） | 常に最新が必要なAPI |
| next: { revalidate: N } | N秒ごとに再検証（ISR） | ある程度新鮮さが必要なリスト等 |
| next: { tags: ['x'] } | tag指定でOn-Demand 無効化 | CMS 更新・フォーム送信後の再生成 |
revalidateTagを使ったOn-Demand ISR：
特定のtagを付けてフェッチしたデータを、revalidateTag(tag)で手動で無効化できます。CMSの更新時・フォーム送信後のデータ更新に活用できます。
Server Actionsの実装
Server ActionsはApp Routerで導入された強力な機能です。サーバー側の関数をフォームやボタンから直接呼び出せます。
Server Actionsの基本的な使い方：
①actions.tsに'use server'を宣言した関数を作成
②フォームのactionまたはuseActionStateフックで呼び出す
③Server ActionはサーバーサイドでDBアクセス・認証確認などを行える
Server Actionsの利点：APIルートを別途作成する必要がなく、型安全なサーバー処理を簡潔に書ける。Zodでバリデーションと組み合わせることで、セキュアなフォーム処理が実装できます。
