How we used Contentful to power our marketing website

How we used Contentful to power our marketing website
Engineering
Rich Chetwynd
Rich Chetwynd

What is a Headless CMS?

A headless content management system decouples backend content management from frontend presentation. Rather than providing built-in display templates, it exposes content through APIs, enabling developers to integrate it with any platform or device. This approach offers marketers a user-friendly interface while giving developers programmatic access to publish content across multiple channels.

homepage

Why Bunny Chose Contentful

When launching their marketing website, Bunny evaluated several headless CMS vendors. After conducting proof-of-concept projects with each, they selected Contentful based on ease of use, interface design, and GraphQL API capabilities.

Building the Data Model

Contentful uses Content Models as schemas defining available fields and data types. Bunny structured their model around a Landing Page object containing multiple Section components corresponding to their Next.js design system.

The Landing Page model includes standard fields like title, description, and metadata, plus toggles for features like dark mode. Critically, it features a Sections field that allows editors to compose pages from reusable section components without requiring code changes.

Implementation with Next.js

Bunny implemented dynamic routing using Next.js’s [slug].js pattern, enabling static page generation on first request. The landing page component fetches content from Contentful based on the URL slug, then iterates through section items to render the complete page.

This architecture allows rapid page creation and component composition entirely within Contentful’s interface, eliminating deployment requirements for new pages.

Results

The implementation took approximately two weeks. Bunny achieved a fast static website with easy content publishing, supported by a GraphQL API backend.

landingpage

code