nextjs

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

Next.js Community が保守する、Next.js 16 App Router アプリケーション向けの包括的なパフォーマンス最適化ガイドです。影響度に基づいて優先順位付けされた8カテゴリ、42のルールが含まれており、自動リファクタリングとコード生成の指針となります。2つのルールは Next.js 16.3 のプレビュー機能（Instant Navigations、Partial Prefetching）を対象としており、cacheComponents と partialPrefetching が有効な場合に利用できます。

適用する場面

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

• 新しい 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 - Cache Components で '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-instant-navigations - Stream、Cache、または Block を使ってナビゲーションを即時にする（16.3 プレビュー）
• route-partial-prefetching - 再利用可能なルートシェルには部分プリフェッチを使う（16.3 プレビュー）
• 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 - サードパーティ製スクリプトを効率的に読み込む

使用方法

まず、プロジェクトのルートで実行します。

npx -y @pymodel/react-frontend-skills detect               # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill nextjs  # deprecated APIs → rule IDs

上記のルールのうちタスクに該当するものと、scan で検出された項目ごとに references/<rule-id>.md を読み、重要な理由と誤ったコードと正しいコードを確認してください。

関連スキル

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