Building a Next.js Marketing Site With a Headless CMS

Your marketing team wants to update the homepage hero copy every two weeks to test messaging. Right now, that means a developer editing a JSX file, opening a pull request, and waiting for a deployment. With a headless CMS and a Next.js frontend, the marketing team can make that change in five minutes without filing a ticket.

Designing the Content Schema

Start with your content model before writing any frontend code. A marketing site typically needs a handful of content types: pages (with composable section blocks), blog posts, team members, and case studies. In ContentGrid, you define these schemas with field types (text, rich text, image, reference, boolean) and the TypeScript SDK generates the corresponding interfaces automatically.

For a composable page structure, model each section as a separate content type (HeroSection, FeatureGrid, Testimonials) and create a Page type that holds an array of references to these section types. This lets editors build pages from reusable blocks without touching the codebase.

Fetching Content in Next.js

Use ContentGrid's TypeScript SDK in your Next.js data-fetching layer. With the App Router, you can fetch content in Server Components and get full TypeScript type coverage:

• Page metadata (title, description) from the CMS, rendered in the Next.js metadata API
• Hero and section content fetched at the page level with a single GraphQL query
• Blog post lists and detail pages using dynamic routes with generateStaticParams
• On-demand revalidation triggered by ContentGrid webhooks when editors publish changes

Connecting Webhooks to Vercel

Set up a webhook in ContentGrid that fires on content publish events. Point it at a Next.js API route that calls revalidatePath or revalidateTag. This gives you ISR (Incremental Static Regeneration) behaviour: pages are statically generated but update within seconds of a content change, without a full site rebuild.

In your Vercel dashboard, add the ContentGrid API key as an environment variable. Your Next.js app reads it server-side for data fetching, and it never ships to the client bundle.

Multi-Locale Marketing Sites

If your marketing site needs EN and NL versions (or any other locales), ContentGrid's multi-locale support handles this at the field level. Configure Next.js i18n routing to match, and fetch locale-specific content using the locale from the URL. ContentGrid returns the correct locale variant for each API request.

• Use Next.js middleware to redirect based on browser language preference
• Store locale slugs in ContentGrid as separate slug fields per locale
• Use hreflang meta tags generated from your CMS data for SEO

The result is a marketing site your team can ship in days, update in minutes, and maintain without developer bottlenecks on every copy change.