Next Cache Components
Implement Next.js 16 Cache Components—PPR, use cache, cacheLife, cacheTag, and migrate off unstable_cache.
Overview
next-cache-components is an agent skill for the Build phase that guides Next.js 16 Cache Components—PPR, use cache, cacheLife, cacheTag, and migration from unstable_cache.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill next-cache-componentsWhat is this skill?
- Covers partial prerendering (PPR) and the use cache directive in Next.js 16
- Documents cacheLife, cacheTag, updateTag, and revalidation patterns
- Migration path from deprecated unstable_cache to use cache plus cacheTag and cacheLife
- Validates unstable_cache( and legacy cacheHandler usage with upgrade guidance to this skill
- Prompt signals: cache components, PPR, cacheLife, cacheTag, unstable_cache
Adoption & trust: 238 installs on skills.sh; 187 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Next.js app still uses unstable_cache or ad-hoc revalidate rules and you need Next 16 cache directives and PPR without guessing stale behavior.
Who is it for?
Indie SaaS on Next.js 16 App Router adopting PPR and tagged server component caching.
Skip if: Non-Next frameworks, Pages Router-only apps with no migration plan, or caching needs that require Vercel Runtime Cache instead of framework directives.
When should I use this skill?
Implementing partial prerendering, use cache, cacheLife, cacheTag, updateTag, or migrating from unstable_cache on Next.js 16.
What do I get? / Deliverables
Your App Router routes use use cache with cacheLife and cacheTag, unstable_cache is removed where flagged, and invalidation matches your data-update flows.
- Directive-based cached segments
- cacheLife profiles
- Tag invalidation wired to mutations
Recommended Skills
Journey fit
Cache Components land while building the Next.js App Router surface and server components, before you tune production perf policies. Directives and config live in app/, next.config, and next/cache imports—core frontend architecture work on Next 16.
How it compares
Pair with runtime-cache for Vercel KV runtime caching; this skill stays on Next.js 16 built-in Cache Components and directives.
Common Questions / FAQ
Who is next-cache-components for?
Solo builders shipping Next.js 16 with the App Router who need PPR and modern cache directives instead of legacy unstable_cache.
When should I use next-cache-components?
During Build when editing app routes, next.config, imports from next/cache, or when prompts mention use cache, cacheTag, or partial prerendering.
Is next-cache-components safe to install?
It suggests code migrations that change caching behavior; review the Security Audits panel on this page and test revalidation in staging.
Workflow Chain
Then invoke: runtime cache
SKILL.md
READMESKILL.md - Next Cache Components
name: next-cache-components description: Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing partial prerendering, caching strategies, or migrating from older Next.js cache patterns. metadata: priority: 6 docs: - "https://nextjs.org/docs/app/getting-started/cache-components" - "https://nextjs.org/docs/app/api-reference/directives/use-cache" pathPatterns: - 'next.config.*' - 'app/**' - 'src/app/**' - 'apps/*/app/**' - 'apps/*/src/app/**' importPatterns: - "next/cache" bashPatterns: - '\bnext\s+(dev|build)\b' promptSignals: phrases: - "use cache" - "cache components" - "partial prerendering" - "PPR" - "cacheLife" - "cacheTag" - "updateTag" - "unstable_cache" allOf: - [cache, component] - [cache, directive] - [partial, prerender] anyOf: - "revalidateTag" - "stale" - "revalidate" - "cache profile" noneOf: [] minScore: 6 validate: - pattern: 'unstable_cache\s*\(' message: 'unstable_cache is deprecated in Next.js 16 — use the "use cache" directive with cacheTag() and cacheLife() instead' severity: recommended upgradeToSkill: next-cache-components upgradeWhy: 'Guides migration from unstable_cache to use cache directive with cacheTag and cacheLife.' - pattern: '\bcacheHandler\s*:' message: 'Singular cacheHandler is deprecated in Next.js 16 — use cacheHandlers (plural) with per-type handlers' severity: recommended - pattern: revalidateTag\(\s*['"][^'"]+['"]\s*\) message: 'Single-arg revalidateTag(tag) is deprecated in Next.js 16 — pass a cacheLife profile: revalidateTag(tag, "max")' severity: recommended retrieval: aliases: - cache components - partial prerendering - PPR - use cache intents: - enable partial prerendering in Next.js - cache async data with use cache directive - invalidate cache with cacheTag - migrate from unstable_cache entities: - use cache - cacheLife - cacheTag - updateTag - revalidateTag - PPR chainTo: - pattern: 'use cache' targetSkill: nextjs message: 'Cache component detected — loading Next.js best practices for RSC boundaries and data patterns alongside caching.' skipIfFileContains: 'next-best-practices' --- name: next-cache-components description: Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing partial prerendering, caching strategies, or migrating from older Next.js cache patterns. metadata: priority: 6 docs: - "https://nextjs.org/docs/app/getting-started/cache-components" - "https://nextjs.org/docs/app/api-reference/directives/use-cache" pathPatterns: - 'next.config.*' - 'app/**' - 'src/app/**' - 'apps/*/app/**' - 'apps/*/src/app/**' importPatterns: - "next/cache" bashPatterns: - '\bnext\s+(dev|build)\b' promptSignals: phrases: - "use cache" - "cache components" - "partial prerendering" - "PPR" - "cacheLife" - "cacheTag" - "updateTag" - "unstable_cache" allOf: - [cache, component] - [cache, directive] - [partial, prerender] anyOf: - "revalidateTag" - "stale" - "revalidate" - "cache profile" noneOf: [] minScore: 6 validate: - pattern: 'unstable_cache\s*\(' message: 'unstable_cache is deprecated in Next.js 16 — use the "use cache" directive with cacheTag() and cacheLife() instead' severity: recommended upgradeToSkill: next-cache-components upgradeWhy: 'Guides migration from unstable_cache to use cache directive with cacheTag and cacheLife.' - pattern: '\bcacheHandler\s*:' message: 'Sin