Next Cache Components
This walks you through Next.js 16's new caching model, which replaces the old experimental PPR flag with a cleaner `use cache` directive. You get three content types in one route: static shells that prerender instantly, cached async data with `cacheLife()` for stale-while-revalidate, and dynamic Suspense boundaries for fresh runtime data. The guide covers tagging with `cacheTag()`, invalidation with `updateTag()` versus `revalidateTag()`, and the key constraint that you can't use cookies or headers inside cached functions unless you pass them as arguments. If you're migrating from `unstable_cache` or route segment configs like `revalidate = 60`, there's a conversion table. Solid reference for actually understanding how PPR works instead of cargo culting config flags.
- skills.sh installs
- 704
- GitHub stars
- 950
- last updated
- Jul 14, 2026
Install
$ npx -y skills add vercel/nextjs-skills --skill next-cache-components --agent claude-codeInstalls into .claude/skills of the current project.
Files
This walks you through Next.js 16's new caching model, which replaces the old experimental PPR flag with a cleaner `use cache` directive. You get three content types in one route: static shells that prerender instantly, cached async data with `cacheLife()` for stale-while-revalidate, and dynamic Suspense boundaries for fresh runtime data. The guide covers tagging with `cacheTag()`, invalidation with `updateTag()` versus `revalidateTag()`, and the key constraint that you can't use cookies or headers inside cached functions unless you pass them as arguments. If you're migrating from `unstable_cache` or route segment configs like `revalidate = 60`, there's a conversion table. Solid reference for actually understanding how PPR works instead of cargo culting config flags.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/vercel/nextjs-skills
- Categories
- Frontend Development, Cloud & Infrastructure
- First seen
- Jun 3, 2026
More from vercel/nextjs-skills
All 3Recommended
More Frontend Development
code-review-excellenceawesome-skills/code-review-skillProvides comprehensive code review guidance for React 19, Vue 3, Angular 17+, Svelte 5, Rust, TypeScript, Java, PHP, Python, Django, Go, C#/.NET, Kotlin, NestJS688skills.sh installs
graphql-developmentmindrally/skillsGraphQL development guidelines with type-safe clients, schema design, and integration with React and Next.js.685skills.sh installs
vanilla-webjanjaszczak/cursorBuild or modify plain HTML/CSS/JavaScript (no framework) using modular ES modules (ESM), SRP, minimal global state, and shippable runnable files with lightweigh669skills.sh installs
chrome-bridge-automationweb-infra-dev/midscene-skillsVision-driven browser automation using Midscene Bridge mode. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all661skills.sh installs
tailwindcss-advanced-design-systemsjosiahsiegel/claude-plugin-marketplaceTailwind CSS advanced design systems with design tokens and @theme configuration. PROACTIVELY activate for: (1) building a design system on Tailwind v4, (2) @th657skills.sh installs
color-palette-extractoronewave-ai/claude-skillsExtract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB649skills.sh installs