What problem does it solve? Enabling Cache Components in a Next.js app surfaces a flood of blocking-prerender and instant-validation errors across every route, and fixing them one by one without a plan stalls migrations. This Skill sequences the entire adoption: flipping the cacheComponents flag, running the cache-components-instant-false codemod, and walking the route tree until the build passes. ## Core Features & Use Cases - Strategy Selection: Choose between an incremental rollout (codemod opts every route out with export const instant = false, then adopt feature-by-feature as separate PRs) or a direct single-branch migration. - Guided Error Resolution: Diagnose the three blocker classes — request-time reads (cookies(), headers(), await params), sync-IO at render time (Date.now(), Math.random()), and "use cache" files reading request data — using the docs page linked from each build or dev-overlay error. - Runtime Verification: Verify each fix in a real browser via the next-dev-loop skill, confirming the static shell renders first and <Suspense> fallbacks resolve to real content, with a build-only fallback for CI environments. - Use Case: You upgrade a Next.js 16.3+ dashboard app, set cacheComponents: true, and the build fails on 40 routes. The Skill runs the codemod to opt routes out, fixes a shared layout calling new Date(), then removes opt-outs feature-by-feature until next build passes cleanly. ## Quick Start Enable Cache Components in my Next.js app and migrate all routes until the build passes with no blocking-prerender errors.
