mcpField
N
nextjs-cache-components-runtime

nextjs-cache-components-runtime

github.com/xirothedevDevelopment254 installsUpdated 23w ago
Repository

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

  1. 01Guidance for Cache Components configuration
  2. 02Covers cache boundaries and runtime rendering
  3. 03Explains tag-based caching and invalidation
  4. 04Addresses migration and deployment concerns
  5. 05Provides on-demand rules and code examples

Use cases

  1. 01Enable or debug cacheComponents
  2. 02Fix uncached-data-outside-Suspense errors
  3. 03Migrate older route caching configurations
  4. 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-runtime

After installing, type/nextjs-cache-components-runtimein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

Next.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, or revalidateTag
  • Fixing "uncached data outside Suspense" build/runtime errors
  • Moving runtime APIs like cookies(), headers(), params, or searchParams through 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

PriorityCategoryImpactPrefix
1Cache BoundariesCRITICALcache-
2Data & Runtime RenderingHIGHdata-
3Operations & DeploymentHIGHops-

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.

Comments

Markdown supported