Building a Next.js Site with Contentstack

Next.js + Contentstack is a popular, fast headless stack

Next.js and Contentstack pair beautifully: structured content from the CDA, rendered with static generation for speed and SEO. This guide wires the two together end to end.

Project Setup

Store credentials as environment variables — never in code:

CONTENTSTACK_API_KEY=xxxx
CONTENTSTACK_DELIVERY_TOKEN=xxxx
CONTENTSTACK_ENVIRONMENT=production

Fetching Content

Centralise data access in a small client module, then call it from your pages:

export async function getArticle(slug) {
  const q = Stack.ContentType('article').Query();
  const [entries] = await q.where('url', slug)
    .includeReference('author').toJSON().find();
  return entries[0];
}

Generating routes from entries keeps content and URLs in sync

Dynamic Routes from Entries

Generate one page per entry so editors create URLs by publishing content:

Next.js API Role
generateStaticParams List all slugs to pre-render
Server Component fetch Load the entry by slug
notFound() Handle unpublished/removed entries

Revalidation on Publish

  1. Add a Contentstack webhook firing on publish.
  2. Point it at a Next.js route handler that calls revalidatePath/revalidateTag.
  3. Editors publish → the affected pages rebuild within seconds.

Static by default, fresh on publish: that’s the headless sweet spot.

What to Learn Next

  • Live Preview integration for real-time editing
  • Image Delivery API with next/image
  • Personalization for tailored experiences

Arivanandhan Chitheshwaran