nextjs-app-router-patterns について
App Routerを使ったNext.jsアプリの構築や移行に取り組む開発者向けのスキルです。Server Components、ルーティングパターン、データ取得、キャッシュ、ストリーミング、Server Actionsを扱います。
主な機能
- 01App Routerのアーキテクチャパターン
- 02Server Componentsとストリーミング
- 03並列ルートとインターセプトルート
- 04データ取得とキャッシュ
- 05Server Actions
活用シーン
- 01App RouterでNext.jsアプリを構築
- 02Pages Routerから移行
- 03Server Componentsとストリーミングを実装
- 04Server Actionsでフルスタック機能を開発
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/nextjs-app-router-patternsを入力して読み込まれたか確認します。
同梱ファイルresources/implementation-playbook.md
詳細
Next.js App Router パターン
Next.js 14+ の App Router アーキテクチャ、Server Components、およびモダンなフルスタック React 開発のための包括的なパターンです。
このスキルを使用する場合
- App Router を使って新しい Next.js アプリケーションを構築する場合
- Pages Router から App Router へ移行する場合
- Server Components とストリーミングを実装する場合
- パラレルルートとインターセプトルートを設定する場合
- データフェッチとキャッシュを最適化する場合
- Server Actions を使ってフルスタック機能を構築する場合
このスキルを使用しない場合
- タスクが next.js app router patterns に関連していない場合
- この範囲外の別のドメインやツールが必要な場合
手順
- 目標、制約、および必要な入力を明確にします。
- 関連するベストプラクティスを適用し、結果を検証します。
- 実行可能なステップと検証方法を提供します。
- 詳細な例が必要な場合は、
resources/implementation-playbook.mdを開きます。
リソース
- 詳細なパターンと例については
resources/implementation-playbook.mdを参照してください。
制限事項
- タスクが上記で説明した範囲に明確に一致する場合にのみ、このスキルを使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
- 必要な入力、権限、安全境界、または成功基準が欠けている場合は、停止して明確化を求めてください。
コメント
Markdown 対応