nextjs-cache-components-runtime について
Next.js Cache Components Runtime は、Next.js 16 のプリレンダリング、ストリーミング、キャッシュ、個別化、無効化を変更する開発者向けのスキルです。明示的なキャッシュ境界を重視し、必要に応じてルールやコード例を参照できます。
主な機能
- 01Cache Components の設定を案内
- 02キャッシュ境界とランタイム描画に対応
- 03タグキャッシュと無効化を解説
- 04移行とデプロイの課題を扱う
- 05必要に応じてルールとコード例を提供
活用シーン
- 01cacheComponents の有効化やデバッグ
- 02Suspense 外の未キャッシュデータエラーを修正
- 03旧式のルートキャッシュ設定を移行
- 04セルフホストやサーバーレス環境のキャッシュ設計
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ xirothedev/ skills --skill nextjs-cache-components-runtimeインストール後、Claude Code で/nextjs-cache-components-runtimeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
AGENTS.mdmetadata.jsontest-cases.jsondataset/cache/metadata-runtime/correct.tsincorrect.tsnotes.mddataset/cache/migration-segment-configs/correct.tsxincorrect.tsxnotes.mddataset/cache/remote-cache/correct.tsincorrect.tsnotes.mddataset/cache/runtime-suspense/correct.tsxincorrect.tsxnotes.mddataset/cache/tag-invalidation/correct.tsincorrect.tsnotes.mddataset/cache/use-cache-scope/correct.tsxincorrect.tsxnotes.mdreferences/_sections.mdcache-metadata-runtime.mdcache-migration-segment-configs.mdcache-remote-cache.mdcache-runtime-suspense.mdcache-tag-invalidation.mdcache-use-cache-scope.mdsources/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 のキャッシュに関するアドバイスには頼らないでください。
コメント
Markdown 対応