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ルート不要）
・layout.tsx：共通レイアウトの定義が階層的に管理できる
・loading.tsx・error.tsx：ローディング状態・エラー状態のUIが簡単に実装できる
・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 Components（デフォルト）を使う場面：
・データベースへの直接アクセス（await db.query()等）
・APIキーなどの機密情報を扱う処理
・大きなライブラリ（クライアントに送らなくていいもの）
・SEOが必要な静的コンテンツ
Client Components（'use client'）を使う場面：
・useState・useEffect等のReact Hooksを使う
・onClick・onChange等のイベントハンドラーを持つ
・ブラウザAPIを使う（localStorage・window等）
・リアルタイムの状態変化を扱う
重要な原則：Serverコンポーネントの中にClientコンポーネントを入れることはできますが、逆（ClientコンポーネントにServerコンポーネント直接インポート）はできません。ただしchildrenとしてpropsで渡すことは可能です。
データフェッチとキャッシュ戦略
App Routerのデータフェッチとキャッシュ戦略を解説します。
Server Componentでのデータフェッチ：
fetch APIを直接Server Component内で使うことで、自動的にキャッシュが機能します。
キャッシュの設定方法：
・fetch('...', { cache: 'force-cache' })：キャッシュを使う（デフォルト）
・fetch('...', { cache: 'no-store' })：キャッシュなし（毎回フェッチ）
・fetch('...', { next: { revalidate: 60 } })：60秒ごとに再検証
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でバリデーションと組み合わせることで、セキュアなフォーム処理が実装できます。