はじめに
Next.js 15とReact 19が登場し、App Routerを中心とした新しい開発体験が標準となってきました。Server ComponentとClient Componentを意識したコンポーネント設計、データハンドリング、状態管理、キャッシュ戦略など、実務で求められる設計判断は多岐にわたります。
筆者は、2023年7月のApp Routerリリース直後から現在まで、約2年に渡りNext.js（v13~15）を使った開発に携わってきました。 実際にApp Routerを使った開発では、情報が少ない中で様々な課題に直面し、最初に挙げたような複数観点での設計や実装判断に迷う場面が数多くありました。
これらの経験を通じて得た知見を体系的にまとめ、同じような課題に直面している開発者の助けになればと思い、今回Bookを執筆しました。
本Bookでは、App Routerの思想に沿いつつ、実務で直面する課題に対応するための実践的な設計方針を体系的にまとめています。
こんな方におすすめ
想定技術スタック
・Next.js v15系
・React v19系
・TypeScript 5.5以上
・TanStack Query v5系
・Zustand v5系
このBookの特徴
実装観点ごとの章分け
各章は、コンポーネント設計、データ取得、状態管理、キャッシュ戦略など、独立して読めるように構成していますので、必要な部分から読み進めていただけます。実装の参考として、ぜひご活用ください。
ユースケースごとの設計のパターン化
各章では、実務で直面する具体的なユースケースを起点に、最適な実装方法を解説しています。このパターンのときは「どう実装するか」への道筋が明確になります。
App Routerの思想に沿った設計
Next.js / Reactの標準機能を最大限に活用し、App Routerの思想に沿った実装を優先しています。フレームワークの進化に追従しやすい、持続可能な設計を目指します。
要件やUXを最優先
技術的な美しさよりも、要件やユーザー体験を最優先する方針です。あくまでユーザー価値を最大化することを目指します。
このBookで学べること
第1章: 基本ルールとディレクトリ構成
プロジェクト全体を貫く基本ルールと、保守性・拡張性を両立させるディレクトリ構成について解説します。
第2章: コンポーネント設計
適切な粒度でのコンポーネント分割や、Server ComponentとClient Componentの使い分けやルールについて解説します。
第3章: データ取得
7つのユースケース別に、最適なデータ取得の実装方法を解説します。
第4章: データ更新
通常の更新から楽観的更新、デバウンス更新まで、6つのパターンを解説します。
第5章: 状態管理
SSOT（データの主軸）とスコープを基準に、9つの状態管理パターンを解説します。
第6章: キャッシュ戦略
複数のキャッシュレイヤーを理解し、戦略的に活用する方法を解説します。
第7章: エラーハンドリング
想定済みエラーと予期せぬエラーに対応する、実践的なエラーハンドリング戦略を解説します。
第8章: 認証・認可
第9章: スタイル
第10章: テスト
最後に
Next.js / Reactは、Webアプリケーション開発における新しい標準を提示しています。本Bookが、App Routerを活用した実務のWebアプリケーション開発の一助となれば幸いです。
最後まで読んでいただき、ありがとうございました。
Discussion