A starter template demonstrating three rendering strategies in Next.js 16 with Contentful as the content source.

Content teams face a tradeoff:

• Dynamic rendering → Fresh content, but slow pages
• Static rendering → Fast pages, but stale content until rebuild

Cache Components in Next.js 16 break this tradeoff. You cache the stable parts (Contentful content) and keep the live parts (views, personalization) dynamic—on the same page.

This repo includes three branches, each demonstrating a different rendering strategy:

npx create-next-app@latest my-contentful-app --example "https://github.com/vercel-labs/template-contentful-next"
cd my-contentful-app
pnpm setup-contentful
pnpm dev

The setup wizard creates a Contentful space, configures the content model, and writes credentials to .env.local.

CONTENTFUL_SPACE_ID=<your space id>
CONTENTFUL_ACCESS_TOKEN=<delivery api token>
CONTENTFUL_REVALIDATE_SECRET=<secret for webhook revalidation>
REDIS_URL=<optional, for view counts>

app/
├── page.tsx                    # Article listing
├── articles/[slug]/page.tsx    # Article detail
└── api/contentful/revalidate/  # Webhook endpoint
lib/
└── contentful/
    ├── client.ts               # Contentful client
    ├── queries.ts              # Data fetching (cached in cache-components branch)
    └── types.ts                # TypeScript types

For a complete walkthrough of the three rendering strategies and how to implement Cache Components, see guide.md.

• Next.js Documentation
• Contentful Documentation
• Cache Components