Communityライティング&編集github.com

LeahyCC/claude-skills

バージョンを考慮したコンポーネント境界、データフェッチ、キャッシュ、ルーティング、およびミューテーションを用いて、Next.js App Router アプリケーションを構築、レビュー、または移行します。App Router の実装およびアーキテクチャタスクに使用します。汎用的な React 最適化、コピーのみの編集、または移行を伴わない Pages Router の修正には使用しないでください。

claude-skills とは?

このスキルは、開発者が Next.js App Router アプリケーションを構築、レビュー、または移行する際に、バージョン認識型のベストプラクティスに従うための包括的なガイドを提供します。具体的には、サーバーコンポーネントとクライアントコンポーネントの適切な境界設定、データフェッチとキャッシュの最適化、ルーティングパターンの実装など、App Router 固有のアーキテクチャ上の決定を支援します。このスキルは、プロジェクトの設定やインストールされている Next.js/React のバージョンを自動的に検査し、それに基づいた適切な戦略を推奨します。また、移行、エラーハンドリング、メタデータ管理、アセット最適化などの特定のタスクについては、詳細なリソースへのリンクを提供します。コードの変更後は、型チェック、リント、ビルドコマンドを実行し、認証、データの鮮度、エラー状態などを検証することで、変更の正確性を確認することを推奨します。このスキルは、Claude Code や Cursor などの AI エージェントと一緒に使用するように設計されており、開発者が一貫性があり堅牢な App Router アプリケーションを効率的に構築できるようにします。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LeahyCC/claude-skills/tree/HEAD/skills/nextjs-app-router

Installed? Explore more ライティング&編集 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Next.js App Router

対応するバージョンと設定を維持してください。サーバーレンダリングと直接的なサーバー読み取りは適切な場所で優先し、インタラクティブでライブなブラウザ動作が必要な場所ではそのままにしておきます。

コンテキストの確立

package.json、ロックファイル、ルートフォルダ、next.config.*、およびプロジェクトの指示を確認します。インストールされている Next.js/React のバージョン、App Router と Pages Router のどちらを使用しているか、ランタイム/デプロイメントの制約、および Cache Components が有効かどうかを特定します。モノレポでは、影響を受けるアプリからこれらを解決します。単に例に合わせるためだけにパッケージをアップグレードしたり機能を有効にしたりしないでください。

利用可能な場合は、Next.js 16.2+ で node_modules/next/dist/docs/ にバンドルされているバージョンに一致したドキュメントを優先します。それ以外の場合は、対応するバージョンの公式ドキュメントを参照してください。ライブドキュメントは新しいマイナーバージョンを説明している可能性があります。API のバージョン履歴と設定を確認してから使用してください。安定した API、実験的なオプション、非推奨、およびプロジェクトの慣習を区別してください。

関連するリソースの選択

タスクに必要なリソースのみを読み取り、バージョンや動作が不確かな場合は公式リンクに従ってください。

タスクリソース
サーバー/クライアントの境界、構成、シリアル化Server Components
読み取り、ストリーミング、ブラウザデータ、アクション、HTTP エンドポイントData fetching
既存のキャッシュモード、Cache Components、プライベート/リモートキャッシュ、無効化Caching
レイアウト、動的ルート、検索、パラレル/インターセプトルートRouting
リクエストのリダイレクト/リライトと楽観的な認証ゲートProxy
想定されるエラー、ローディング、リカバリ、404 レスポンスセマンティクスError handling
メタデータのエクスポート、継承、SEO 統合Metadata
画像/フォントの設定とロードのトレードオフAssets
Pages から App への段階的移行Migration
意図的なメジャー/マイナーアップグレードVersion changes

決定の優先順位付け

  1. シークレットとユーザーデータを保護します。データの近くで読み取り/ミューテーションを認証および承認し、信頼できない入力を検証し、個人データが誤って共有されたキャッシュに入らないようにします。プロキシと UI の可視性だけでは不十分な認証です。
  2. バージョンとレンダリングモード間で正確性を維持します。非同期リクエスト API、キャッシュの前提条件、ルート規則、およびリカバリプロパティは、インストールされているバージョン/設定に依存します。
  3. 実証されたウォーターフォールと不要なクライアントコードを削除します。独立した作業を並列化し、有用な UI を維持する Suspense 境界を選択します。クライアントフェッチは、ポーリング、ブラウザのみの状態、およびインタラクティブな更新のために適切なままです。
  4. キャッシュ、プリフェッチ、およびアセットヒントを、フレッシュネス、デプロイメント、および測定された動作に合わせて調整します。これらはすべての App Router アプリの前提条件ではなく、選択です。

サーバー専用の作業には Server Components を使用します。インタラクションのために有用なモジュール境界で 'use client' を追加します。これはリーフである必要はありません。UI ミューテーションには適切な場合に Server Action を、HTTP コントラクト(ブラウザクライアントを含む)には Route Handler を使用します。どちらも認可の代わりにはなりません。

実際の変更の検証

利用可能な場合は、影響を受けるアプリの既存の型チェック、リント、およびビルドコマンドを実行します。失敗する可能性のある動作をテストします:認証された直接リクエスト、ユーザー間の分離、ミューテーション後のフレッシュネス、ハード/ソフトナビゲーション、エラー、およびローディング。インポート、認証ヘルパー、または永続性がプレースホルダーである場合に、スニペットをプロダクション対応と呼んではいけません。何を実行し、何が未テストのままかを明記します。

レビューの場合は、修正可能な障害とそのバージョン/設定範囲を先頭に挙げます。オプションの改善と正確性の問題を区別します。実装の場合は、選択した境界/キャッシュモード、変更された動作、および検証について説明します。

ソースレビューは範囲が限定されており、包括的な認定ではありません。正規のリンク、該当するバージョン/設定、確認済みのセクション、上流の日付、およびフレッシュネスポリシーについては、SOURCES.md を参照してください。リポジトリのパイロットレビュー/評価記録はメンテナンスの証拠であり、実行時には必要ありません。

関連スキル