What problem does it solve? Enabling Cache Components in a Next.js app surfaces a flood of blocking-prerender and instant-validation errors across the route tree, and fixing them one by one without a plan stalls the migration. This Skill sequences the entire adoption: flipping the cacheComponents flag, running the cache-components-instant-false codemod, and walking routes feature-by-feature until the build passes. ## Core Features & Use Cases - Strategy selection: Choose between an incremental path (codemod opts every route out first, ship as its own PR) or a direct path (fix routes as the build flags them). - Guided error resolution: Diagnose the three blocker classes — request-time reads (cookies(), headers(), await params), sync-IO calls (new Date(), 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 to real content. - Use Case: You upgrade a Next.js 16.3+ app, set cacheComponents: true, and the build fails on dozens of routes. This Skill runs the codemod, fixes sync-IO blockers in shared layouts, then removes opt-outs one feature at a time until next build is clean. ## Quick Start Enable Cache Components in my Next.js app and work through every blocking route until the build passes.
