next-cache-components

Installation
Summary

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'
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
Installs
27.5K
GitHub Stars
868
First Seen
Jan 26, 2026