mcpField
N
nextjs-cache-components-runtime

nextjs-cache-components-runtime

github.com/xirothedev開発254 回インストール23 週間前に更新
リポジトリ

nextjs-cache-components-runtime について

Next.js Cache Components Runtime は、Next.js 16 のプリレンダリング、ストリーミング、キャッシュ、個別化、無効化を変更する開発者向けのスキルです。明示的なキャッシュ境界を重視し、必要に応じてルールやコード例を参照できます。

主な機能

  1. 01Cache Components の設定を案内
  2. 02キャッシュ境界とランタイム描画に対応
  3. 03タグキャッシュと無効化を解説
  4. 04移行とデプロイの課題を扱う
  5. 05必要に応じてルールとコード例を提供

活用シーン

  1. 01cacheComponents の有効化やデバッグ
  2. 02Suspense 外の未キャッシュデータエラーを修正
  3. 03旧式のルートキャッシュ設定を移行
  4. 04セルフホストやサーバーレス環境のキャッシュ設計

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/xirothedev/skills --skill nextjs-cache-components-runtime

インストール後、Claude Code で/nextjs-cache-components-runtimeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
metadata.json
test-cases.json
dataset/cache/metadata-runtime/
correct.ts
incorrect.ts
notes.md
dataset/cache/migration-segment-configs/
correct.tsx
incorrect.tsx
notes.md
dataset/cache/remote-cache/
correct.ts
incorrect.ts
notes.md
dataset/cache/runtime-suspense/
correct.tsx
incorrect.tsx
notes.md
dataset/cache/tag-invalidation/
correct.ts
incorrect.ts
notes.md
dataset/cache/use-cache-scope/
correct.tsx
incorrect.tsx
notes.md
references/
_sections.md
cache-metadata-runtime.md
cache-migration-segment-configs.md
cache-remote-cache.md
cache-runtime-suspense.md
cache-tag-invalidation.md
cache-use-cache-scope.md
sources/
inventory.json

詳細

Next.js Cache Components ランタイム

Next.js のルートをプリレンダリング、ストリーミング、キャッシュ、パーソナライズ、または無効化する方法を変更するタスクでは、このスキルを使用してください。以前のルートレベルの動的/静的フラグに頼らず、キャッシュ境界を明示してください。

適用するタイミング

次のような場合に、このスキルを使用してください:

  • cacheComponents: true を有効にする、またはデバッグする場合
  • use cache、cacheLife、cacheTag、updateTag、または revalidateTag を追加する場合
  • 「uncached data outside Suspense」ビルド/ランタイムエラーを修正する場合
  • cookies()、headers()、params、または searchParams などのランタイム API をキャッシュされた関数経由で使用する場合
  • dynamic、revalidate、または以前のモデルのキャッシュコードを Cache Components に移行する場合
  • セルフホストまたはサーバーレス環境でのキャッシュ動作を設計する場合

必要に応じて読み込む

まずこのファイルを確認してください。タスクで必要な場合にのみ、詳細ファイルを読み込みます:

references/_sections.md
references/cache-use-cache-scope.md
references/cache-runtime-suspense.md
references/cache-tag-invalidation.md
references/cache-remote-cache.md
references/cache-metadata-runtime.md
references/cache-migration-segment-configs.md
dataset/cache/use-cache-scope/correct.tsx
sources/inventory.json

各ルールファイルには、次の内容が含まれます:

  • このパターンが重要な理由
  • 誤った例と正しい例
  • より大規模な TypeScript/TSX の例を含むデータセットのパス
  • 公式の参照資料

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

優先度カテゴリ影響プレフィックス
1キャッシュ境界重大cache-
2データとランタイムレンダリング高data-
3運用とデプロイ高ops-

ソースポリシー

Cache Components については、Next.js 16 の公式ドキュメントを使用してください。プロジェクトで cacheComponents が有効になっていない場合を除き、Next.js 13/14/15 のキャッシュに関するアドバイスには頼らないでください。

コメント