概要

App Routerを軸にNext.jsの実践的な実装パターンを習得する

想定読者

ReactとTypeScriptの基礎を習得済みで、App Routerへの移行または新規導入を検討しているフロントエンド〜フルスタックエンジニア

こんな人には向いていない

• Next.js・Reactをまだ触れたことがない完全な初学者(JSX・useStateの前提知識が必要であり、入門書として設計されていない)
• Pages Routerを使い続ける予定で、App Routerへの移行を当面検討していないチーム(本書の大半がApp Router前提の解説のため費用対効果が低い)
• バックエンドAPIサーバーの設計・運用を主目的とするエンジニア(本書はNext.jsのフルスタック機能から実装に踏み込むが、サーバー単体設計の深掘りは対象外)

この本で身につくこと

• Server ComponentとClient Componentの使い分けを設計レベルで判断できる
• App Routerが持つ4種類のキャッシュ(Data Cache / Full Route Cache / Router Cache / Request Memoization)を目的に応じて制御できる
• Parallel RoutesとIntercepting Routesを使ったURLを壊さないモーダル遷移を実装できる
• Server Actionによるデータ更新・楽観的UI更新・フォームバリデーションを一気通貫で実装できる
• NextAuth.jsを用いたOAuth認証フローをNext.jsアプリに組み込める
• SSGルートの実装とパフォーマンスの定量評価手法を身につける

ハイライト(外部からの言及)

最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん、パフォーマンスを上げるための知識や関連ライブラリまで、詳細なサンプルコードをもとに解説していきます。 — 出典

本書のスコープを端的に示す冒頭文。基礎からパフォーマンスチューニングまでを一冊でカバーする意図が明確に示されている

章立て

第1章 Next.jsの基礎

App Router 時代の Next.js の特徴を整理する導入章

第2章 Server Componentとレンダリング

Next.js 13 以降の中核概念。RSC / Server Actions の実装パターン

第3章 App Routerの規約

Pages Router からの移行で詰まりやすい部分。layout / page / loading / error の対応関係

第4章 Route Handler

API ルート(かつての pages/api)が App Router でどう扱われるか

第5章 サンプルアプリの概要

第 6 章以降のハンズオンを追うための前提章。ローカル環境セットアップを済ませてから進むことが前提で、この章を飛ばすと後続のコード文脈が追えなくなる

第6章 データ取得とキャッシュ

fetch の Next.js 拡張(revalidate / tags)。本書の核心

第7章 認証機能

NextAuth.js(Auth.js)による OAuth 認証の実装例。セキュリティ設計より実装パターン寄りで、JWT / セッション管理の深掘りは別途補完が必要

第8章 モーダル表示とデータ連携

Parallel Routes / Intercepting Routes の応用

第9章 データ更新とUI

Server Actions / useOptimistic による楽観的 UI

第10章 パフォーマンスとキャッシュ

第 6 章のデータキャッシュを本番ユースケース視点で再整理する章。SSG / ISR の選択基準を定量的に扱い、本書全体のキャッシュ設計が繋がる位置づけ

付録A Prisma

本書サンプルアプリが依存する ORM の最小セットアップを記載。スキーマ定義と基本 CRUD を示すが、マイグレーション戦略や N+1 対策は公式ドキュメントへの誘導に留まる

学習のヒント

• 第2章(Server Componentとレンダリング)は本書全体の前提概念なので、Server/Client Componentの境界が曖昧なまま先に進まず、図を描いて整理してから第3章へ移ると回収が早い
• 第10章(パフォーマンスとキャッシュ)は第6章の続きとして位置づけると吸収しやすい。この2章を連続して読むとキャッシュ設計の全体像が一度に把握できる
• 第5〜9章はサンプルアプリを手元で動かす前提で書かれているため、第5章のローカル環境構築を先に済ませてから読み進める
• Server ActionとRoute Handlerの使い分けに迷った場合は4章と9章を並べて読み比べると、それぞれの適用場面の判断基準が明確になる

前提知識

• ReactのuseState・useEffectなど基本Hooksの使い方
• TypeScriptの基本的な型注釈(型定義・ジェネリクスの読み取り)
• HTTPリクエスト/レスポンスの基礎とREST API呼び出しの経験
• npmによるパッケージ管理と開発サーバー起動の基本操作

次に読む本

Next.js公式ドキュメント(App Routerセクション)

本書は 2024 年 3 月時点の仕様を網羅しているが、App Router のキャッシュ挙動はその後の Next.js バージョンで複数回仕様変更された。本書で概念を掴んだ後、実装時に公式の Changelog と Caching ページを照合することで、仕様差異による実装バグを事前に防げる

Prisma公式ドキュメント

本書の付録 A は Prisma の導入手順に留まり、スキーマ設計の判断基準・マイグレーション戦略・N+1 問題の回避には踏み込んでいない。実プロジェクトで Prisma を採用する段階で公式の Schema Reference と Queries セクションを参照すると、本書サンプルコードの意図が追跡できる

実践TypeScript

本書は TypeScript を前提とするが型の解説は最小限で、Conditional Types や mapped types を用いた型設計には踏み込んでいない。サンプルコードの型注釈を読み解くだけでなく自前の型定義を書けるようになる段階で参照すると、型システムへの理解が一段深まる