nextjs-16

Next.js 16 のコアフレームワークの仕組みを扱います（現行の安定版：16.3）。Turbopack（デフォルトのバンドラー。オプトアウトフラグ `--webpack` を指定すれば Webpack も引き続き利用可能）、App Router（ネストされたレイアウト、並列ルート／インターセプトルート、page.tsx/layout.tsx/loading.tsx/error.tsx/not-found.tsx などのファイル規約）、Cache Components（`use cache`、`cacheTag()`、`cacheLife()`、`revalidateTag()`）、`proxy.ts`（完全な Node.js ランタイムで、Edge middleware を置き換えます）、React 19 との統合（View Transitions、新しいフック）について説明します。

v15 から v16 への重要な破壊的変更をまとめています。proxy.ts が middleware.ts を置き換えること、next dev／next build のデフォルトが Turbopack になること、削除された experimental.ppr フラグを cacheComponents が置き換えること、React 19 が必須になること、params／searchParams が非同期になることです。このスキルではコアフレームワーク API のみを扱います。Prisma、Better Auth、shadcn/ui、Zustand を組み合わせて本番環境向けのスタックを構築する場合は、代わりに nextjs-stack を使用してください。next.config.* を使わない純粋な React SPA の場合は、代わりに react-expert スキルを使用してください。

Next.js 16 エキスパート

Server Components、ストリーミング、Turbopack を備えた、本番環境に対応する React フレームワークです。

エージェントのワークフロー（必須）

実装を始める前に、必ず 3 つのエージェントを並行して起動してください。それぞれ name を指定して、Agent を 1 回呼び出します。

1. fuse-ai-pilot:explore-codebase - 既存のルート、コンポーネント、パターンを分析します
2. fuse-ai-pilot:research-expert - Context7／Exa を通じて最新の Next.js 16 ドキュメントを確認します
3. mcp__context7__query-docs - v15 から v16 への破壊的変更を確認します

実装後、検証のために fuse-ai-pilot:sniper を実行してください。

---

概要

使用する場面

• サーバー優先のアーキテクチャで新しい React アプリケーションを構築する場合
• 最適なパフォーマンスと SEO のために Server Components が必要な場合
• ストリーミングと段階的レンダリングを実装する場合
• Next.js 14／15 からバージョン 16 に移行する場合
• ルート保護に proxy.ts を使用する場合（middleware を置き換えます）
• 開発時のビルドを高速化するために Turbopack を活用する場合

Next.js 16 を選ぶ理由

機能	メリット
Turbopack がデフォルト	ビルドが 2～5 倍高速、HMR が 10 倍高速。Webpack を使う場合はオプトアウトの --webpack を指定
Cache Components	use cache ディレクティブによる明示的なキャッシュ
proxy.ts	完全な Node.js ランタイムで、Edge middleware を置き換えます
React Compiler	自動メモ化により、手動の useMemo／useCallback は不要
React 19	View Transitions、useEffectEvent、Activity コンポーネント
App Router	ネストされたレイアウト、並列ルート、インターセプトルート

---

v15 からの破壊的変更

重要な移行ポイント

1. proxy.ts が middleware.ts を置き換えます - Edge ではなく、完全な Node.js ランタイムを使用します
2. Turbopack がデフォルトになります - next dev／next build は Turbopack を使用します。カスタム webpack 設定がある場合、移行するか --webpack でオプトアウトしないとビルドに失敗します
3. cacheComponents と use cache - experimental.ppr／experimental_ppr（削除済み）を置き換えます。cacheComponents では PPR がデフォルトの動作です
4. React 19 が必須です - 新しいフックと View Transitions API を利用します
5. params／searchParams が非同期になります - 動的ルートのパラメーターは await する必要があります

16.1～16.3 の新機能（upgrade.md を参照）

• 16.1 - Turbopack のファイルシステムキャッシュが next dev でデフォルト有効に。next dev --inspect
• 16.2 - <Link> の transitionTypes プロパティ、next start --inspect、Adapters API が安定版に
• 16.3 - catchError と retry() によるエラーリカバリー（安定版）、next/root-params、import.meta.glob、Turbopack のビルドキャッシュがデフォルト有効に、Instant Navigations のオプトイン（cacheComponents と partialPrefetching を使用）

---

SOLID アーキテクチャ

モジュールベースの構成

ページは、機能モジュールをインポートする薄いエントリーポイントです。

• app/page.tsx → modules/public/home/ からインポート
• app/dashboard/page.tsx → modules/auth/dashboard/ からインポート
• modules/cores/ → 共有サービス、ユーティリティ、設定

ファイル規約

• page.tsx - ルートの UI コンポーネント
• layout.tsx - 共有 UI のラッパー
• loading.tsx - Suspense のローディング状態
• error.tsx - エラーバウンダリー
• not-found.tsx - 404 の処理

---

コアコンセプト

サーバーコンポーネント（デフォルト）

すべてのコンポーネントは、デフォルトでサーバーコンポーネントです。インタラクティブ機能、フック、ブラウザー API が必要な場合にのみ、'use client' ディレクティブを使用します。

キャッシュ戦略

• use cache - 非同期関数にキャッシュを適用します
• cacheTag() - キャッシュデータにタグを付け、対象を絞って再検証できるようにします
• cacheLife() - キャッシュの期間（stale、revalidate、expire）を制御します
• revalidateTag() - 必要に応じてキャッシュデータを無効化します

データ取得

サーバーコンポーネントから直接データを取得します。ネイティブキャッシュを使用する fetch() またはデータベースクエリを使用します。getServerSideProps や getStaticProps は不要です。

---

リファレンスガイド

用途	リファレンス
初期セットアップ	installation.md、project-structure.md
v15→v16 への移行	upgrade.md、middleware-migration.md
ルーティング	app-router.md、routing-advanced.md
キャッシュ	caching.md、cache-components.md
サーバーコンポーネント	server-components.md、directives.md
React 19 の機能	react-19.md、react-compiler.md
ルート保護	proxy.md、security.md
SEO／メタデータ	metadata.md、metadata-files.md
フォーム／アクション	forms.md、data-fetching.md
デプロイ	deployment.md、environment.md

---

ベストプラクティス

1. まずサーバーコンポーネントを使う - 必要な場合にのみ 'use client' を追加します
2. データ取得を利用箇所に配置する - データを使用する場所で取得します
3. Suspense でストリーミングする - 低速なコンポーネントを Suspense でラップします
4. middleware より proxy.ts を使う - 認証向けの完全な Node.js ランタイムを使用できます
5. キャッシュを明示的に適用する - 負荷の高い処理には use cache を使用します
6. 並列ルート - 独立した UI セクションを同時に読み込みます

---

パフォーマンス

ビルドの最適化

• Turbopack - インクリメンタルコンパイル、即時 HMR
• React Compiler - 自動メモ化
• ツリーシェイキング - 未使用コードの除去
• コード分割 - ルートベースの分割を自動的に行います

ランタイムの最適化

• ストリーミング - HTML を段階的にレンダリングします
• 部分ハイドレーション - インタラクティブなコンポーネントのみをハイドレーションします
• 画像の最適化 - WebP／AVIF への変換を自動で行います
• フォントの最適化 - next/font によりレイアウトシフトをゼロにします