nextjs-cache-components-runtime
About nextjs-cache-components-runtime
Next.js Cache Components Runtime is a skill for developers changing prerendering, streaming, caching, personalization, or invalidation in Next.js 16. It focuses on explicit cache boundaries and provides on-demand guidance with code examples.
Key features
- 01Guidance for Cache Components configuration
- 02Covers cache boundaries and runtime rendering
- 03Explains tag-based caching and invalidation
- 04Addresses migration and deployment concerns
- 05Provides on-demand rules and code examples
Use cases
- 01Enable or debug cacheComponents
- 02Fix uncached-data-outside-Suspense errors
- 03Migrate older route caching configurations
- 04Design caching for self-hosted or serverless deployments
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ xirothedev/ skills --skill nextjs-cache-components-runtimeAfter installing, type/nextjs-cache-components-runtimein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with 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.jsonDetails
From the project READMENext.js Cache Components Runtime
Use this skill when the task changes how a Next.js route is prerendered, streamed, cached, personalized, or invalidated. Make the cache boundary explicit instead of relying on older route-level dynamic/static flags.
When to Apply
Use this skill when:
- Enabling or debugging
cacheComponents: true - Adding
use cache,cacheLife,cacheTag,updateTag, orrevalidateTag - Fixing "uncached data outside Suspense" build/runtime errors
- Moving runtime APIs like
cookies(),headers(),params, orsearchParamsthrough cached functions - Migrating
dynamic,revalidate, or previous-model caching code to Cache Components - Designing cache behavior for self-hosted or serverless deployments
Load On Demand
Start with this file. Load detailed files only when the task needs them:
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
Each rule file includes:
- Why the pattern matters
- Incorrect and correct examples
- Dataset path with larger TypeScript/TSX examples
- Official source references
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Cache Boundaries | CRITICAL | cache- |
| 2 | Data & Runtime Rendering | HIGH | data- |
| 3 | Operations & Deployment | HIGH | ops- |
Source Policy
Use official Next.js 16 docs for Cache Components. Do not rely on Next.js 13/14/15 caching advice unless the project has not enabled cacheComponents.