The Contentful Marketing Starter Template is a Next.js boilerplate for building marketing websites on Contentful's headless CMS, pairing a pre-built homepage with component-driven content modeling and typed GraphQL data fetching.
What is the Contentful Marketing Starter Template?
The template is a starter application maintained by Contentful that uses Next.js for server-side rendering and Contentful as the content source. It accepts Contentful content models as input — including a Hero Banner content type — and outputs a fast, SEO-ready marketing website with React components that query Contentful's GraphQL API. The project is written in TypeScript, uses React Query for data fetching, and generates its GraphQL queries and hooks automatically with graphql-codegen.
Key Features
- Contentful Components (ctf-components) — Each content type maps to a React component in
src/features/ctf-components, such asctf-hero-banner, with a.graphqlquery file, a data-fetching wrapper, and a rendering component. - GraphQL code generation — Running
yarn graphql-codegen:generatecreates GraphQL schema, TypeScript types, and React Query hooks; a watch mode regenerates them as.graphqlfiles change. - Localization ready — Content is structured to support multi-language delivery through Contentful's localization features.
- SEO ready — The template is pre-configured for search engine optimization, and Next.js SSR ensures crawlable server-rendered pages.
- TypeScript throughout — All code is typed; the TypeScript compiler is enforced in pre-commit and pre-push Husky hooks.
- Live preview support — Inspector mode and field tagging are pre-implemented for template components, and a guide is provided for custom components.
- One-click deployment — Deploy buttons for Vercel and Netlify clone the repo and pre-set the required
CONTENTFUL_SPACE_ID,CONTENTFUL_ACCESS_TOKEN, andCONTENTFUL_PREVIEW_ACCESS_TOKENenvironment variables.
Who is it for?
- Web developers — They get a pre-configured Next.js and Contentful project with automatic GraphQL type generation, so they can build custom sections without wiring up data fetching by hand.
- Content editors — Editors manage all marketing copy in the Contentful web app and see changes through live preview on the deployed site.
- Agencies and freelancers — The template gives a reusable starting point for client marketing websites, with content types and components they can rename and extend per project.
What can you do with the Contentful Marketing Starter Template?
- Launch a new marketing site — New Contentful users can install the template directly during signup; the template comes with a homepage, content models, and example components.
- Add custom content sections — Follow the documented workflow: create a folder like
ctf-[contentTypeName], add a.graphqlquery, run codegen, then register the generated component insrc/mappings.ts. - Connect a preview environment — After deploying, update the Content preview URL in space settings so editors can preview draft and unpublished content on the live site.
- Enforce code quality — Husky pre-commit and pre-push hooks run
tscandlint-staged, running ESLint and Prettier on staged files.
How does the Contentful Marketing Starter Template work?
The template's component resolver takes a Contentful content type id and __typename and looks it up in src/mappings.ts. If the component is found in componentMap, its data is already available; otherwise the resolver falls back to componentGqlMap and the component fetches its own data via a generated React Query hook. The codegen pipeline reads .graphql files collocated in component folders and produces a use[FileName] hook for each query.
FAQ
Is the Contentful Marketing Starter Template free?
Yes. The repository is released under the MIT License, so the template code is free to use and modify. To use it, you need a Contentful account; the starter template installation flow is currently only available to new Contentful users.
What environment variables do I need?
You need three values: CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN (the Delivery API token), and CONTENTFUL_PREVIEW_ACCESS_TOKEN (the Preview API token). Rename .env.example to .env and fill them in for local development; on Vercel or Netlify, add them as project environment variables.
How do I deploy the template?
Use the one-click deploy buttons in the README for Vercel or Netlify. Both platforms clone the GitHub repository and automatically create the three environment variable keys; you only need to paste your actual Contentful values into the hosting provider's settings.
Does the template support localization?
Yes. The template is localization ready, meaning it is set up to work with Contentful's localized fields and can serve content in multiple languages depending on how you configure your space.
