What problem does it solve? Turning on the cacheComponents flag in a Next.js App Router project floods the build with blocking-prerender and instant-validation errors, and fixing them route by route without a plan is slow and error-prone. This Skill sequences the entire adoption: enabling the flag, running the opt-out codemod, and walking each route to a clean dev overlay and passing build. ## Core Features & Use Cases - Strategy selection: Choose between an incremental path (codemod opts every route out with export const instant = false, ship that PR, then adopt feature by feature) or a direct path (fix whatever the build flags first). - Blocker diagnosis and fixes: Handles the three blocker classes — request-time reads (cookies(), headers(), await params/searchParams), sync-IO calls (new Date(), Math.random()), and misused "use cache" files — using the official per-error docs recipes. - Runtime verification: Verifies each fix in a real browser via the next-dev-loop skill, with build-only and manual fallbacks, and confirms the static shell versus streamed content split. - Use Case: You upgrade a Next.js 16.3 app, flip cacheComponents: true, and the build fails on 30 routes. The Skill runs the cache-components-instant-false codemod, gets the build green as its own PR, then removes opt-outs feature by feature until no TODO: Cache Components adoption comments remain. ## Quick Start Enable Cache Components in my Next.js app and work through every blocking route until the build passes.
