Agent skill · software engineering · vercel
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.
Why this skill is useful
Provides specific commands and migration patterns for adopting Cache Components in Next.js that the AI wouldn't reliably generate on its own.
What it needs
Requires next installed locally. About 12k tokens when loaded. Last updated 2026-08-07. 141,663 stars on the source repository.
What this skill does
next-cache-components-adoption Enable Cache Components on an app and walk it to a passing build. This skill sequences the work; per-error recipes live in the dev overlay fix cards and the build's terminal output. The migrating to Cache Components guide is the canonical reference for the concepts and per-API recipes this skill applies — consult it whenever the skill steps reference a pattern ("use cache", cacheLife, <Suspense> placement, etc.) and you want the full explanation. requires App Router project. Cache Components is an App Router feature; cacheComponents: true does nothing for pages/ routes. If the project has a pages/ or src/pages/ tree but no app/ or src/app/ tree, stop and tell the user — Pages → App migration is its own project, not part of this skill. A hybrid app (both pages/ and app/) is fine: the flag affects the app/ routes; pages/ routes are unaffected and don't need opt-outs. A resolved app directory. Locate next.config.{js,ts,mjs,cjs} first: that's the project root, and an agent invoked from a subdirectory would otherwise test for app/ against the wrong cwd and find nothing. Look for app/ and src/app/ under it, and treat every command and glob in this skill as relative to whichever one exists. If both exist, Next.js builds app/ and never looks at src/app/, so its routes are shadowed and unbuilt — tell the user that and ask which tree to migrate instead of picking one. A runnable app. The whole loop verifies against next dev and a browser, so the app has to boot. If it reads a database or required env at import (e.g. an env.ts that throws on a missing DATABASEURL), confirm it actually starts — with the real environment, or local data you stand up — before step 1. Adoption can't be verified against an app that won't run. Next.js 16.3 or later. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel/next-cache-components-adoption