next-cache-components
Installation
Summary
Mix static, cached, and dynamic content in a single Next.js route with Partial Prerendering.
- Enable with
cacheComponents: trueinnext.config.ts; replaces the oldexperimental.pprflag - Use the
'use cache'directive at file, component, or function level to cache async data with automatic key generation based on arguments and closures - Control cache lifetime with
cacheLife()using built-in profiles ('minutes','hours','days','weeks','max') or inline configuration with stale, revalidate, and expire times - Invalidate caches with
cacheTag()for tagging andupdateTag()for immediate refresh orrevalidateTag()for background revalidation - Wrap dynamic content in Suspense; cannot access
cookies(),headers(), orsearchParamsinsideuse cacheblocks unless using'use cache: private'
SKILL.md
Cache Components (Next.js 16+)
Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route.
Enable Cache Components
// next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfig
This replaces the old experimental.ppr flag.
Related skills
More in Next.js
vercel-react-best-practices
69 prioritized React and Next.js performance rules across 8 categories
vercel-labs/agent-skillsvercel-composition-patterns
Composable component architecture patterns for scalable Next.js apps
vercel-labs/agent-skillsnext-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-skillsdeploy-to-vercel
Deploy Next.js apps to Vercel with correct config and environment setup
vercel-labs/agent-skillsturborepo
Turborepo task pipelines, caching, remote cache, and CI configuration
vercel/turborepo