61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Cache Components Plugin for Claude Code
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).
Features
This plugin provides a comprehensive skill that:
- Proactively activates in projects with
cacheComponents: true - Teaches the
'use cache'directive,cacheLife(),cacheTag(), and invalidation APIs - Explains parameter permutation rendering and subshell generation
- Covers migration from deprecated
revalidate/dynamicsegment configs - Provides build-time error solutions and debugging guidance
Installation
Step 1: Add the Next.js Marketplace
/plugin marketplace add vercel/next.js
Step 2: Install the Plugin
/plugin install cache-components@nextjs
Or install via CLI:
claude plugin install cache-components@nextjs
Step 3 (Optional): Enable for Your Team
Add to your project's .claude/settings.json to auto-enable for all team members:
{
"enabledPlugins": {
"cache-components@nextjs": true
}
}
What's Included
| File | Description |
|---|---|
SKILL.md |
Core concepts, APIs, and proactive application guidelines |
REFERENCE.md |
Complete API reference, generateStaticParams, deprecated configs |
PATTERNS.md |
12 production patterns including subshell composition |
TROUBLESHOOTING.md |
Build errors, debugging techniques, common issues |
Usage
Once installed, the skill automatically activates when:
- You're working in a Next.js project with
cacheComponents: true - You ask about caching, PPR, or the
'use cache'directive - You're writing React Server Components or Server Actions
Example Triggers
- "How do I cache this data fetching function?"
- "What's the difference between updateTag and revalidateTag?"
- "I'm getting a build error about uncached data outside Suspense"
- "Help me set up generateStaticParams for my product pages"
Key Concepts Covered
Parameter Permutation Rendering
When you provide generateStaticParams, Next.js renders ALL permutations:
generateStaticParams returns:
[{ category: 'jackets', slug: 'bomber' }]
Next.js renders:
/products/jackets/bomber ← Complete page
/products/jackets/[slug] ← Category subshell (reusable!)
/products/[category]/[slug] ← Fallback shell
Deprecated Segment Configs
| Old (Deprecated) | New (Cache Components) |
|---|---|
export const revalidate = 3600 |
cacheLife('hours') inside 'use cache' |
export const dynamic = 'force-static' |
Use 'use cache' + Suspense |
Contributing
This plugin lives in the Next.js repository at .claude-plugin/plugins/cache-components/.
To contribute improvements:
- Edit files in
.claude-plugin/plugins/cache-components/skills/cache-components/ - Test locally with
claude --plugin-dir .claude-plugin/plugins/cache-components - Submit a PR to the Next.js repository
Version History
1.0.0
- Initial release
- Covers
'use cache',cacheLife(),cacheTag(),updateTag(),revalidateTag() - Parameter permutation rendering and subshell generation
- Migration guide from deprecated segment configs
- Build-time feedback and troubleshooting