Next.js 16 + Contentful Starter

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

The Problem

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.

Branches

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

Quick Start

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.

Environment Variables

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>

Project Structure

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

Learn More

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