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.

• Next.js 16.3 or later. That release is where the pieces this skill relies on land: top-level cacheComponents, export const instant, the dev-overlay instant-navigation validation warnings, and the cache-components-instant-false codemod. If next --version reports below 16.3, upgrade first:

  • npx @next/codemod@latest upgrade latest to apply the version-to-version codemods.
  • Read the relevant version upgrade guide (e.g. Version 16) for what the codemod doesn't cover.

• No incompatible config keys. cacheComponents: true errors on any file that still exports dynamic, revalidate, or fetchCache. Translate, don't delete. Each export encodes behavior the route needs to keep doing; migrate each one to its Cache Components equivalent via the migration guide's per-key sections. If a value can't be cleanly translated yet, leave a // TODO: Cache Components adoption — restore revalidate = 3600 comment so the loop picks it up. The cache-components-instant-false codemod does not touch these.

• experimental.dynamicIO is fatal. It was renamed to top-level cacheComponents and the old key now aborts before any build can run — remove it (or replace with cacheComponents: true) first. experimental.useCache is still accepted as a deprecated alias; redundant once cacheComponents: true is set, so remove it for clarity.

notes

• No passing baseline before the flag. If the app already uses "use cache", the pre-flag build errors with please enable the feature flag cacheComponents. Enabling the flag is the first thing you do (in Incremental, before the codemod; in Direct, before fixing routes) — not a thing to do after getting a passing build. Note this in your starting summary so it doesn't read as a regression.