next-cache-components
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'
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.
More from vercel-labs/next-skills
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
84.0Knext-upgrade
Upgrade Next.js to the latest version following official migration guides and codemods
18.3Knext-best-practice
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
2
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-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/turborepoai-sdk
Vercel AI SDK: generateText, streamText, tool calling, and useChat
vercel/ai