What problem does it solve? Enabling Cache Components in a Next.js app 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: flipping the cacheComponents flag, running the cache-components-instant-false codemod, and walking every route to a passing build with browser verification. ## Core Features & Use Cases - Strategy selection: Choose between an incremental path (codemod opts every route out with export const instant = false, ship a quiet PR, then adopt feature by feature) or a direct path (fix whatever the build flags first). - Guided error resolution: Diagnose the three blocker classes — request-time reads (cookies(), headers(), await params), sync-IO calls (Date.now(), Math.random()), and "use cache" files reading request data — using the docs page linked from each error. - Runtime verification: Verify each fix in a real browser via the next-dev-loop skill, confirming the static shell renders and <Suspense> fallbacks resolve, not just that the build passes. - Use Case: You upgrade a Next.js 16.3 app, set cacheComponents: true, and the build fails on dozens of routes. The Skill runs the codemod, fixes sync-IO blockers in shared layouts, then removes opt-outs one feature at a time until grep finds no remaining TODO: Cache Components adoption comments. ## Quick Start Ask the agent to enable Cache Components in your Next.js app and work through the blocking routes until the build passes.
