Next Cache Components Adoption

This helps you migrate Next.js components to use the newer cache APIs that replaced the older data fetching patterns. If you're working on a Next.js codebase that still uses getStaticProps, getServerSideProps, or the pages directory fetch patterns, this skill guides the transition to the app directory's cache function and React Server Components model. The 2.5K installs suggest it's hitting a real migration pain point, which makes sense given how much Next.js's data fetching philosophy shifted between versions. Worth having around if you're modernizing a Next.js app and want consistent patterns across your components rather than a mix of old and new approaches.

skills.sh installs: 25.8K
GitHub stars: 143.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel/next.js --skill next-cache-components-adoption --agent claude-code

Installs into .claude/skills of the current project.

Files

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.