next-cache-components-adoption skill: turn on Cache Components in a Next.js app

A Next.js skill that makes your agent enable Cache Components and fix the blocking routes it finds, one feature at a time.

Installs: 23.1K; on skills.sh
Stars: 143.5K; on GitHub
Files: 2; besides SKILL.md
Updated: Nov 2026; last repo commit

next-cache-components-adoption makes your agent turn on cacheComponents and walk your app to a passing build. It triggers when you want to enable or migrate to Cache Components, handle blocking-route errors, run the cache-components-instant-false codemod, or choose between export const instant = false and fixing a route in place.

It needs an App Router project on Next.js 16.3 or later, and an app that boots under next dev. The agent asks if you want a first PR that opts every route out, or a direct fix, and it checks in with you after every feature. It suggests commits but does not make them without your confirmation.

Good for

Next.js App Router teams adopting Cache Components
Developers facing a flood of blocking-prerender errors after flipping cacheComponents
Maintainers who want the migration split into reviewable PRs

Install next-cache-components-adoption

Claude Code

Copy this prompt.

Install the next-cache-components-adoption skill in Claude Code. Run this command:

npx skills add https://github.com/vercel/next.js --skill next-cache-components-adoption

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

requires
notes
the shape of the work
background
working surfaces
finding blocking routes
verifying each fix at runtime
step 1: choose a strategy
incremental
end of the pre-step: check in
direct
step 2: the inner loop, remove opt-outs one feature at a time
the loop, with a browser (preferred)
the loop, build-only (fallback)
loop notes
step 3: verify the feature

Key facts

Author: Vercel (the Next.js team)
Repository: vercel/next.js (skills/next-cache-components-adoption)
Installs on skills.sh: 23,092 as of 2026-11-02
GitHub stars: 143,460 for the whole vercel/next.js repo, 2026-11-02
License: MIT (as detected by GitHub)
Last commit to the repo: 2026-11-01
What is inside: 3 files including SKILL.md (two reference files)

What it includes

App Router, Next.js 16.3+, bootable app, no dynamic/revalidate exports
Stops if the project has only a pages/ tree. Flags files that export dynamic, revalidate or fetchCache, and removes the fatal experimental.dynamicIO key.
Read · Requirements check
Incremental (opt out first) or Direct (fix as you go)
The agent asks in terms of PRs you want. With no user to ask, it defaults to the incremental route and documents the choice.
Read · Step 1: choose a strategy
Adds export const instant = false to every page and layout
Runs npx @next/codemod@latest cache-components-instant-false on your app folder. It refuses to run on a dirty git tree unless you pass --force.
Try: “Enable Cache Components in this app and get next build passing.”
Runs code · cache-components-instant-false codemod
Remove opt-outs top-down, one feature at a time
For each route, remove the opt-out, reload in dev, fix the blocker from the linked docs page, verify in a browser, and re-check sibling routes. A build-only fallback exists.
Runs code · Step 2: the inner loop
Prefers the next-dev-loop skill, then another browser, then build only
Verification options are ranked. The skill says to install next-dev-loop before the loop starts if it is not already available.
Runs code · Runtime verification
Build passes, no bare TODOs, browser check, then ask you
A checklist, followed by a check-in with a table of routes to click through.
Runs code · Step 3: verify the feature
When to fix a blocking read and when to leave it
Used when a fix is ambiguous or the blocking code looks security-sensitive. The agent shows you the options instead of deciding alone.
Read · references/per-page-decisions.md
Optional sweep for more instant navigations
A follow-up after adoption, never required.
Read · references/dev-only-validations.md

From the official docs

Permissions

Medium risk

The agent edits many route files and runs npx commands to migrate your app. Use a clean git branch and review the diff before you merge.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits most route files in your app
The codemod inserts an opt-out into every page, layout and default file. Run it on a clean branch and review the diff before you merge.
It runs npx packages on your machine
The SKILL.md runs @next/codemod through npx. It also tells the agent to install next-dev-loop with `npx skills add` and says the agent does not need your permission for that (it should tell you briefly if you are present, and installs it silently in non-interactive runs). Read each command before you approve it, and install next-dev-loop yourself first if you want to control that step.
Fixes can change what users see
Moving data behind Suspense and adding "use cache" changes caching. Check each route in a browser, as the skill itself requires.

Technical details

Talks to	npm registry via npx. nextjs.org docs pages linked from errors
Scopes	Edits next.config and every page, layout and default file through the codemod Runs next dev and next build, and drives a browser Can run npx @next/codemod@latest upgrade latest and agents-md (the latter only after asking you)

Questions

What does next-cache-components-adoption do?

It guides your agent through turning on Cache Components in a Next.js app. The agent enables the flag, runs a codemod, fixes blocking routes, and checks in with you after each feature.

What does my project need?

An App Router project on Next.js 16.3 or later that boots under next dev. The SKILL.md says to stop if the project only has a pages/ folder. Files that export dynamic, revalidate or fetchCache need migrating first.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. The SKILL.md does not name which clients it works in.

Does it need the next-dev-loop skill?

It strongly prefers it but has fallbacks. The SKILL.md ranks next-dev-loop first, another browser tool second, then a build-only loop. It tells the agent to install next-dev-loop before starting unless it is already available, and says to skip that when the project must stay on webpack.

Will it commit or push my changes?

It suggests commits but says never to make one without your confirmation. The codemod refuses to run on a dirty git tree unless forced, so commit or stash your work first.

Is it safe to use?

It edits many files in your app and runs npx commands, so run it on a clean branch and review the diff. It can edit every page and layout file through the codemod and may install another skill with npx skills add. Treat the result like any large migration PR.

Does it cover Partial Prefetching or optimizing the static shell?

No. The SKILL.md points to two separate skills for that, next-partial-prefetching-adoption and next-cache-components-optimizer, and treats the optimizer as pure optimization, not part of adoption.

Information

updated Nov 2, 2026

Repository: vercel/next.js
Folder: skills/next-cache-components-adoption

vercel/next.js skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

next-cache-components-adoption SKILL.md · github.com
dev-only-validations.md · github.com
per-page-decisions.md · github.com