Next.js入門 — App Router編
Reactベースのフレームワーク「Next.js」を使って、モダンなWebアプリケーション開発の基礎を学ぶ入門書です。App Routerを中心に、実践的なコード例とともにステップバイステップで解説します。
目次（全10章）
- 1Next.jsとは何か
Next.jsの概要と、なぜ今Next.jsを学ぶべきなのかを解説します。
- 2開発環境のセットアップ
Next.jsプロジェクトの作成から開発サーバーの起動まで、ステップバイステップで解説します。
- 3コンポーネントを理解する
Server ComponentsとClient Componentsの違いと使い分けを学びます。
- 4ルーティングとページ — App Routerのファイルベースルーティング入門
Next.js App Routerのファイルベースルーティングの仕組みを、ページの作り方・特別なファイル名・Linkによる画面遷移まで実践的に解説します。
- 5レイアウトと共通UI — layout.tsxとネストレイアウトの仕組み
Next.js App Routerのlayout.tsxの役割、ルートレイアウトとネストレイアウト、再レンダリングされない仕組みとtemplate.tsxとの違いを解説します。
- 6動的ルーティング — [slug]・paramsとgenerateStaticParamsでページを量産する
Next.js App Routerの動的ルーティング（[slug]）の作り方、async paramsの受け取り、generateStaticParamsによる静的生成、catch-allセグメントまでを解説します。
- 7データ取得とキャッシュ — Server Componentのfetchとrevalidateの仕組み
Next.js App Routerのデータ取得を、Server Componentでのfetch、キャッシュとrevalidate、静的・動的レンダリングの分かれ目、並列取得まで実践的に解説します。
- 8ローディングとエラー処理 — loading.tsx・error.tsx・not-foundの使い方
Next.js App Routerのloading.tsx（読み込み中UI）、error.tsx（エラー画面）、not-found.tsx（404）の使い方とSuspenseの関係を実践的に解説します。
- 9メタデータとSEO — generateMetadataでtitle・OGPを動的に設定する
Next.js App RouterのMetadata APIを使い、title・descriptionの設定、generateMetadataによる動的メタデータ、OGP画像やtitleテンプレートまでSEOの実装を解説します。
- 10Server Actionsとフォーム — 'use server'でデータを更新する実践入門
Next.js App RouterのServer Actionsを使い、'use server'によるフォーム送信・データ更新、useActionStateやuseFormStatusでの状態管理、revalidatePathまで実践的に解説します。