本書は、Next.js の App Router と T3 Stack を用いた Web アプリケーション開発について実務に役立つ知識を解説した実践ガイドです。 App Router とT3 Stack のモダンなフロントエンド技術の解説に加えて、エラーハンドリング、テスト、本番リリースなど、実務で絶対に必要なのに入門書では省かれがちな開発フローの知識も解説しています。 本書は技術の解説に比重を置いており、アプリケーションを作り上げるハンズオンはありません。その代わりに、なるべく噛み砕いて詳細な説明を随所に盛り込み、技 術への解像度を上げることを大切にしました。 本書が、「知識に裏打ちされた実装力を身につけるための教科書」として、何度も読み返していただける存在になれば嬉しく思います。 ■ こんな方にオススメ！ ✅ React とNext.js の実務経験があり、知識を深めたい方 ✅ T3 Stack やTypeScript を使用したフルスタック開発に興味がある方 ✅ Next.js の Pages Router しか使ったことがなく、App Router をキャッチアップしたい方 ✅ フロントエンド技術を軸に、ゼロからの開発～テスト～本番リリースまでの一連のプロセスを学びたい方 ■ 本書で得られるスキル 👉 Next.js App Router の深い理解 App Router の基礎から応用まで、React Server Components（RSC）を含 む最新機能を網羅的に学習できます。従来の Pages Router との違いを理解 し、最新のNext.js 開発手法を身につけることができます。 👉 T3 Stack を活用したフルスタック開発へのステップアップ tRPC、Prisma、Drizzle、NextAuth.js など、T3 Stack を構成する主要技術 の特徴と実践的な活用方法を学べます。これらの技術を組み合わせることで、 効率的かつ堅牢なアプリケーション開発のスキルを習得できます。 👉 テストとデプロイの実践 ユニットテストの作成から CI/CD パイプラインの構築、Vercel を用いたデ プロイまで、開発からリリースまでの一連のプロセスを学べます。実際のプロ ジェクトを想定した実践的なスキルを習得できます。 👉 プロダクション環境の管理 ステージング環境とプロダクション環境の管理、ロールバックとカナリアリ リースの実装など、本番環境での運用に必要なスキルを学べます。 ■ 電子版の閲覧について 本書の電子版ファイルは PDF の形式で提供しています。 【目次】 第1章　Next.js App Router 　1.1　App Router の誕生背景 　　1.1.1　React とNext.js の進化 　　1.1.2　従来のPages Router との違い 　1.2　App Router のルーティングシステム 　　1.2.1　App Router の基本のルーティング 　　1.2.2　Pages Router とApp Router のファイル構成比較 　1.3　Dynamic Routes とRoute Groups 　　1.3.1　Dynamic Routes 　　1.3.2　Route Groups 　1.4　ファイル規約 　1.5　ルート間のナビゲーション 　　1.5.1　<Link>コンポーネント 　　1.5.2　useRouter フック 　　1.5.3　ネイティブ History API 　1.6　Layouts とTemplates の効果的な活用 　　1.6.1　Layouts とは 　　1.6.2　Root Layout とその役割 　　1.6.3　Layouts の効果的な利用 　　1.6.4　Nested Layouts 　　1.6.5　Templates とは 　1.7　Parallel Routes 　　1.7.1　Parallel Routes とは 　　1.7.2　Parallel Routes の実装方法 　1.8　Intercepting Routes 　　1.8.1　Intercepting Routes とは 　　1.8.2　Intercepting Routes の実装方法 　　1.8.3　Intercepting Routes とParallel Routes の組み合わせ 　1.9　Middleware の活用と設定 　　1.9.1　Middleware とは 　　1.9.2　Middleware の実行順序 　　1.9.3　Middleware の具体例 第2章　React Server Components（RSC）とは 　2.1　React Server Components（RSC）が生まれた背景 　　2.1.1　マルチページアプリケーション（MPA）の全盛期 　　2.1.2　シングルページアプリケーション（SPA）の進化と普及 　　2.1.3　サーバーサイドレンダリング（SSR）の導入と課題 　　2.1.4　静的サイトジェネレーター（SSG）の台頭とプリレンダリング技術 　　2.1.5　React Server Components（RSC）の登場と新たな展望 　2.2　従来のSSR とReact Server Components（RSC）の特徴 　　2.2.1　従来のSSR の仕組み 　　2.2.2　React Server Components（RSC）の特徴 　　2.2.3　SSR とReact Server Components（RSC）の比較 　2.3　Server Components の動作の流れ 　　2.3.1　基本的な動作フロー 　　2.3.2　効率的な処理とデータの最適化 　2.4　Server Components の利点 　　2.4.1　初期ページロードの高速化 　　2.4.2　SEO の向上 　　2.4.3　JavaScript バンドルサイズの削減 　2.5　Server Actions とその活用 　　2.5.1　Server Actions の概要 　　2.5.2　Server Actions のユースケースと実装例 　　2.5.3　Server Actions のパフォーマンス向上効果 　2.6　Server Components でのデータフェッチング 　　2.6.1　従来の Pages Router と App Router でのデータフェッチの違い 　　2.6.2　データフェッチングの利点と最適化 　　2.6.3　キャッシュと再検証 　　2.6.4　キャッシュの無効化 　2.7　Server Components とClient Components の使い分け 　　2.7.1　Server Components と Client Components の配置戦略 　　2.7.2　Server Components の特性と使用場面 　　2.7.3　Client Components の特性と使用場面 　　2.7.4　効果的な併用方法 　2.8　Server Components とClient Components の連携 　　2.8.1　props を使用したデータの受け渡し 　　2.8.2　Suspense を活用した非同期データの処理 第3章　T3 Stack について理解を深める 　3.1　T3 Stack の原則と各ツールの特徴 　　3.1.1　T3 Stack とは 　　3.1.2　技術選定の判断軸、「T3 原則」とは 　　3.1.3　TypeScript の特徴 　　3.1.4　Next.js の特徴 　　3.1.5　tRPC の特徴 　　3.1.6　Prisma / Drizzle の特徴 　　3.1.7　Tailwind CSS の特徴 　　3.1.8　NextAuth.js の特徴 　3.2　tRPC による効率的なデータ通信 　　3.2.1　tRPC と OpenAPI、GraphQL、gRPC との比較 　　3.2.2　tRPC のメリットデメリット 　　3.2.3　tRPC の基本用語と全体のフロー 　　3.2.4　src/server ：tRPC の初期化、API の作成 　　3.2.5　src/trpc: tRPC をフロントエンドで呼び出すための設定 　　3.2.6　src/app: Server Components / Client Components でAPI を呼ぶ 　3.3　ORM 比較（Prisma VS Drizzle） 　　3.3.1　ORM とは 　　3.3.2　Prisma とは 　　3.3.3　Drizzle とは 　　3.3.4　Prisma と Drizzle の型安全の実現方法の違い 　　3.3.5　Prisma と Drizzle のコード比較 第4章　App Router + T3 Stack + React Server Components（RSC）での実践 　4.1　tRPC を用いた RSC でのデータフェッチ 　　4.1.1　Server Components でのデータフェッチ 　　4.1.2　Server Actions でのデータフェッチ 　　4.1.3　一部 Client Components を用いた Server Components でのデータフェッチ（リアルタイム更新） 　　4.1.4　Tanstack Query を用いた Client Components でのデータフェッチ 　4.2　NextAuth を用いた認証システムの構築 　　4.2.1　NextAuth.js について 　　4.2.2　App Router での実装 　　4.2.3　tRPC との連携 　　4.2.4　Prisma との連携 　4.3　tRPC を用いた RSC でのエラーハンドリング 　　4.3.1　エラーハンドリングの重要性 　　4.3.2　エラーの種類とハンドリング方法 　　4.3.3　フォームバリデーション 　　4.3.4　error.tsx、global-error.tsx 　　4.3.5　not-found.tsx 　　4.3.6　Next.js の middleware 　　4.3.7　tRPC のプロシージャ 　　4.3.8　tRPC の middleware 第5章　Next.js でのユニットテスト 　5.1　ユニットテストの重要性と Jest の概要 　　5.1.1　ソフトウェアテストとは？ 　　5.1.2　ユニットテストとは？ 　　5.1.3　テストフレームワークの選択肢と Jest を選ぶ理由 　　5.1.4　Jest の特徴と歴史 　5.2　Jest の基本的な使い方 　　5.2.1　Jest のインストールと設定 　　5.2.2　テストの基本構造 (it, describe, expect, matcher) 　　5.2.3　スナップショットテストの活用 　5.3　Next.js でのコンポーネントテスト 　　5.3.1　App Router と Pages Router のコンポーネントテストの違い 　　5.3.2　ユーザーインタラクションのテスト 　　5.3.3　ページレンダリングとデータ取得のテスト 　5.4　モックとスタブの活用 　　5.4.1　Test Double とは? 　　5.4.2　モックとスタブの違いと使い分け 　　5.4.3　Jest におけるモックとスタブの役割 　　5.4.4　Jest を使ったモックとスタブの実装例 第6章　Vercel でのデプロイと運用 　6.1　Vercel の概要 　　6.1.1　Vercel の特徴と機能一覧 　　6.1.2　料金プラン 　　6.1.3　類似のホスティングサービスとの比較 　　6.1.4　Vercel の最新機能 　6.2　Vercel を使ったデプロイの実践 　　6.2.1　開発環境の構築 　　6.2.2　Vercel アカウントの設定 　　6.2.3　デプロイの手順 　　6.2.4　ロールバックの方法 　　6.2.5　カスタムドメインとSSL 証明書の設定 　　6.2.6　環境変数とシークレットの管理 　6.3　デプロイパイプラインの構築 　　6.3.1　CI/CD の概念と重要性 　　6.3.2　GitHub Actions を用いた自動化 　　6.3.3　Staging 環境とProduction 環境の管理 　　6.3.4　カナリアリリース（Canary release）の実装