nextjs

Next.js Community Next.js 16 App Router のベストプラクティス

Next.js Community がメンテナンスする、Next.js 16 App Router アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリーにわたる 40 のルールを、影響度の高い順にまとめ、自動リファクタリングとコード生成の指針として提供します。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• 新しい Next.js 16 App Router コードを作成するとき
• 'use cache' ディレクティブを使用してキャッシュ戦略を設定するとき
• サーバーコンポーネントとデータ取得を実装するとき
• 並列ルートとインターセプティングルートを使用してルーティングを設定するとき
• フォーム処理とミューテーション用のサーバーアクションを作成するとき

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

優先度	カテゴリー	影響度	プレフィックス
1	ビルドとバンドルの最適化	CRITICAL	build-
2	キャッシュ戦略	CRITICAL	cache-
3	サーバーコンポーネントとデータ取得	HIGH	server-
4	ルーティングとナビゲーション	HIGH	route-
5	サーバーアクションとミューテーション	MEDIUM-HIGH	action-
6	ストリーミングと読み込み状態	MEDIUM	stream-
7	メタデータと SEO	MEDIUM	meta-
8	クライアントコンポーネント	LOW-MEDIUM	client-

クイックリファレンス

1. ビルドとバンドルの最適化（CRITICAL）

• build-optimize-package-imports - アイコンライブラリ向けに optimizePackageImports を設定する
• build-dynamic-imports - 重いコンポーネントには動的インポートを使用する
• build-barrel-files - App Router ではバレルファイルからのインポートを避ける
• build-turbopack-config - Turbopack のファイルシステムキャッシュを有効にする
• build-external-packages - Node の依存関係向けにサーバー外部パッケージを設定する

2. キャッシュ戦略（CRITICAL）

• cache-use-cache-directive - 明示的なキャッシュには 'use cache' ディレクティブを使用する
• cache-revalidate-tag - cacheLife プロファイルとともに revalidateTag を使用する
• cache-fetch-options - Fetch のキャッシュオプションを正しく設定する
• cache-revalidate-path - ルートレベルのキャッシュ無効化には revalidatePath を使用する
• cache-react-cache - リクエストの重複排除には React の cache() を使用する
• cache-segment-config - エクスポートを使用してルートセグメントのキャッシュを設定する

3. サーバーコンポーネントとデータ取得（HIGH）

• server-parallel-fetching - サーバーコンポーネントでデータを並列取得する
• server-component-streaming - 段階的な読み込みのためにサーバーコンポーネントをストリーミングする
• server-data-colocation - データ取得をコンポーネントと同じ場所に配置する
• server-preload-pattern - 重要なデータにはプリロードパターンを使用する
• server-avoid-client-fetching - 初期データのクライアント側でのデータ取得を避ける
• server-error-handling - サーバーコンポーネントのエラーを適切に処理する

4. ルーティングとナビゲーション（HIGH）

• route-parallel-routes - 独立したコンテンツには並列ルートを使用する
• route-intercepting-routes - モーダルパターンにはインターセプティングルートを使用する
• route-prefetching - Link のプリフェッチを適切に設定する
• route-proxy-ts - ネットワーク境界のロジックには proxy.ts を使用する
• route-not-found - リソースが見つからない場合は notFound() を使用する

5. サーバーアクションとミューテーション（MEDIUM-HIGH）

• action-server-action-forms - フォーム送信にはサーバーアクションを使用する
• action-pending-states - useFormStatus で処理中の状態を表示する
• action-error-handling - サーバーアクションのエラーを適切に処理する
• action-optimistic-updates - 即座にフィードバックを返すには楽観的更新を使用する
• action-revalidation - ミューテーション後にキャッシュを再検証する

6. ストリーミングと読み込み状態（MEDIUM）

• stream-suspense-boundaries - Suspense 境界を戦略的に配置する
• stream-loading-tsx - ルートレベルの読み込み状態には loading.tsx を使用する
• stream-error-tsx - ルートレベルのエラー境界には error.tsx を使用する
• stream-skeleton-matching - スケルトンの寸法を実際のコンテンツに合わせる
• stream-nested-suspense - 段階的に情報を表示するために Suspense をネストする

7. メタデータと SEO（MEDIUM）

• meta-generate-metadata - 動的なメタデータには generateMetadata を使用します
• meta-sitemap - サイトマップを動的に生成します
• meta-robots - クロールを制御するために Robots を設定します
• meta-opengraph-images - 動的な OpenGraph 画像を生成します

8. クライアントコンポーネント（LOW-MEDIUM）

• client-use-client-boundary - 'use client' の境界範囲を最小限にします
• client-children-pattern - サーバーコンポーネントをクライアントコンポーネントの子として渡します
• client-hydration-mismatch - ハイドレーションの不一致を回避します
• client-third-party-scripts - サードパーティスクリプトを効率的に読み込みます

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリー構成と影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート
• build-dynamic-imports - ルールファイルの例
• cache-use-cache-directive - ルールファイルの例

関連スキル

• React 19 の基礎については、react-19 スキルを参照してください
• データ取得のパターンについては、tanstack-query スキルを参照してください
• クライアントサイドフォームについては、react-hook-form スキルを参照してください

コンパイル済みドキュメント全文

すべてのルールを展開した完全なガイドについては、AGENTS.md を参照してください