next-cache-components

SKILL.md

Mix static, cached, and dynamic content in a single Next.js route with Partial Prerendering.

Enable with cacheComponents: true in next.config.ts; replaces the old experimental.ppr flag

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 and updateTag() for immediate refresh or revalidateTag() for background revalidation

Wrap dynamic content in Suspense; cannot access cookies(), headers(), or searchParams inside use cache blocks 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.