nextjs-app-router-patterns について
Next.js 14+ の App Router を使うアプリの構築や移行を支援するスキルです。Server Components、ルーティング、データ取得、キャッシュ、Server Actions を扱い、詳細なパターン集も用意されています。
主な機能
- 01App Router のアーキテクチャパターン
- 02Server Components とストリーミング
- 03並列ルートとインターセプトルート
- 04データ取得とキャッシュ
- 05Server Actions によるフルスタック機能
活用シーン
- 01Next.js App Router アプリの開始
- 02Pages Router からの移行
- 03ストリーミング Server Components の実装
- 04データ取得とキャッシュの最適化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/nextjs-app-router-patternsを入力して読み込まれたか確認します。
同梱ファイルresources/implementation-playbook.md
詳細
Next.js App Router のパターン
Next.js 14 以降の App Router アーキテクチャ、サーバーコンポーネント、モダンなフルスタック React 開発の包括的なパターンです。
このスキルを使用する場面
- App Router を使って新しい Next.js アプリケーションを構築する
- Pages Router から App Router に移行する
- サーバーコンポーネントとストリーミングを実装する
- 並列ルートとインターセプトルートを設定する
- データ取得とキャッシュを最適化する
- Server Actions を使ってフルスタック機能を構築する
このスキルを使用しない場面
- タスクが Next.js App Router のパターンと無関係である
- この範囲外の別のドメインやツールが必要である
手順
- 目標、制約、必要な入力を明確にします。
- 関連するベストプラクティスを適用し、結果を検証します。
- 実行可能な手順と検証方法を提示します。
- 詳細な例が必要な場合は、
resources/implementation-playbook.mdを開きます。
リソース
- 詳細なパターンと例については、
resources/implementation-playbook.mdを参照してください。
コメント
Markdown 対応