nextjs-best-practices

Next.js のベストプラクティス

Next.js 関連のすべてのタスクで、このスキルを最優先のガイドとして使用してください。Next.js のコードに関わるタスクでは、まずサブシステムを特定し、関連するルールファイルとデータセットのケースのみを読み込んでください。

適用する場面

Next.js アプリケーションにのみ関係するタスクでは、このスキルを最優先のガイドとして使用してください。次の場合に、これらのガイドラインを参照してください。

• Next.js のページ、レイアウト、サーバーコンポーネント、クライアントコンポーネント、API ルート、サーバーアクション、ミドルウェア／プロキシ、またはテストを作成またはレビューする場合
• データ取得戦略、キャッシュポリシー、再検証ロジック、またはストリーミング動作を設計する場合
• App Router の問題、レンダリング境界、ハイドレーションエラー、またはナビゲーションのプリフェッチをデバッグする場合
• App Router のパターンではなく、非推奨の Pages Router パターン（getServerSideProps、getStaticProps、getStaticPaths）を使用するコードをリファクタリングする場合
• Next.js 13、14、または 15 から Next.js 16 にアップグレードする場合

必要に応じて読み込む

このファイルから始めてください。タスクで必要な場合にのみ、詳細なファイルを読み込んでください。

references/_sections.md
references/arch-app-router.md
references/server-components.md
references/data-fetching-caching.md
references/api-route-handlers.md
dataset/data/fetching-caching/correct.tsx
sources/inventory.json

各ルールファイルには、次の内容が含まれています。

• そのパターンが重要な理由
• 誤った例と正しい例
• 対応バージョン（13/14/15/16）
• より大きな変更前／変更後の TypeScript/TSX の例を含むデータセットのパス
• 公式または厳選された参照元

優先度別のルールカテゴリ

優先度の番号が小さいカテゴリを優先して、競合を解決してください。同じ優先度のカテゴリ間で競合する場合は、次の順に優先してください。セキュリティ、アーキテクチャ、サーバーコンポーネント、API、データ取得、クライアント、バンドル、パフォーマンス、テスト、運用。

優先度	カテゴリ	影響	プレフィックス
1	アーキテクチャとルーティング	CRITICAL	arch-
2	サーバーコンポーネントとレンダリング	CRITICAL	server-
3	API ルートとサーバーアクション	CRITICAL	api-
4	データ取得とキャッシュ	HIGH	data-
5	クライアントコンポーネントとインタラクティビティ	HIGH	client-
6	バンドルの最適化	MEDIUM-HIGH	bundle-
7	パフォーマンスと最適化	MEDIUM-HIGH	perf-
8	セキュリティと認証	MEDIUM	security-
9	テスト戦略	MEDIUM	test-
10	運用と設定	MEDIUM	ops-

バージョンアップグレードのガイダンス

Next.js 16.x で非推奨になった、または変更されたパターン：

旧パターン（13/14/15）	新しいパターン（16 以降）	参照先
middleware.ts	proxy.ts（ネットワーク境界の名称変更）	references/api-proxy-rename.md
getServerSideProps	非同期サーバーコンポーネント + fetch()	references/server-no-ssr-props.md
getStaticProps + getStaticPaths	generateStaticParams + サーバーコンポーネント	references/server-no-sg-props.md
forwardRef	直接の ref プロパティ（React 19）	references/client-no-forwardref.md
Pages Router の app/ への移行	サーバーコンポーネントをデフォルトとし、'use client' で境界を設定	references/arch-app-router.md
next/image の unoptimized	LCP には priority、ファーストビューより下には loading="lazy" を使用	references/perf-image-optimization.md

外部スキルパック

React のコンポジションパターンに関する詳しいガイダンスには、vercel-composition-patterns スキルを使用してください。React のパフォーマンス最適化には、vercel-react-best-practices スキルを使用してください。この Next.js スキルは、一般的な React のパターンではなく、フレームワーク固有のパターン（ルーティング、レンダリング、キャッシュ、設定）に焦点を当てています。

ソースポリシー

フレームワークの仕様については、公式の Next.js ドキュメントとバージョン管理されたフレームワークのサンプルを優先してください。エコシステムの調査、例、パッケージの把握には awesome-nextjs のリストやボイラープレートのリポジトリを利用できますが、信頼性の低いコミュニティのスニペットを公式ガイダンスより優先しないでください。新しいメジャー Next.js バージョンについてスキルを公開または使用する前に、sources/inventory.json を更新してください。