Hygraph Marketing Website Starter

The Hygraph Marketing Website Starter is a Next.js reference implementation for building a SaaS marketing website with content managed in the Hygraph headless CMS.

What is this starter?

It is a boilerplate project that connects Next.js to Hygraph, a headless CMS previously known as GraphCMS. You supply a Hygraph endpoint URL and a project with Page and Blog Post content models; the starter renders those as a marketing site with landing pages and a blog. The project is maintained as a reference implementation by Hygraph itself and includes a live demo at marketing-websites.withheadlesscms.com.

Key features

• Next.js Preview Mode — Lets editors preview draft content from Hygraph before publishing; requires a Permanent Auth Token for published content, a Preview Token for draft content, and a shared preview secret.
• Internationalized Routing — Uses Next.js i18n routing to serve the site in multiple languages based on locale prefixes.
• next/image — Leverages Next.js built-in image optimization for responsive images from Hygraph assets.
• GraphQL Union Types — Demonstrates polymorphic relations in the Hygraph schema, enabling flexible content sections within pages.
• next-seo — Handles SEO tags such as titles, descriptions, and Open Graph metadata for each page and blog post.
• Chakra UI — The repository uses Chakra UI as its component styling system, as listed in the project topics.
• One-click Vercel deployment — A Vercel button clones the repository and prompts for the HYGRAPH_ENDPOINT environment variable, so you can deploy without leaving the browser.

Who is it for?

• SaaS founders and developers who want a fast starting point for a marketing site with a blog, without building the Next.js + CMS plumbing from scratch.
• Hygraph users looking for a canonical example of how to set up preview mode, i18n, and union types on their own projects.
• Agencies that build client marketing sites and need a headless CMS with draft preview workflows for non-technical editors.

What can you do with it?

• Launch a marketing website — Start from the template to get a structured landing page and blog layout, then extend the content models in Hygraph.
• Set up editorial previews — Configure the preview URLs on both Page and Blog Post models so editors click from Hygraph to a draft version of the site.
• Localize your content — Use Internationalized Routing to serve the site in multiple languages, with locale-specific slugs in Hygraph.

How does it work?

Clone the repository with npx degit Hygraph/reference-marketing-website#main, install dependencies with yarn, then copy .env.local.example to .env.local and set HYGRAPH_ENDPOINT to your Hygraph API endpoint. Run yarn dev to start locally. For preview mode, also add GRAPHCMS_TOKEN, GRAPHCMS_PREVIEW_TOKEN, and GRAPHCMS_PREVIEW_SECRET to your environment, then update the Page and Blog Post preview URLs in Hygraph to pass the same secret and the content slug.

FAQ

How do I set up the environment variables?

The single required variable is HYGRAPH_ENDPOINT, which you can find in the Hygraph project settings UI under APIs. The preview mode variables are optional unless you need draft previews.

What is the difference between Hygraph and GraphCMS?

Hygraph is the new name for GraphCMS. Many route names, tokens, and documentation still use the GraphCMS label; the template’s preview variables use the GRAPHCMS_ prefix for compatibility.

Does this template support multi-language sites?

Yes. Internationalized Routing is built in, so you can create locale-specific versions of pages and posts. Hygraph content models can hold localized fields.

Is the template free?

The starter code is open source and free to use. Hygraph, the CMS platform it connects to, offers its own free tier, though higher-volume projects on Hygraph are paid.

Can I use this without a Hygraph project?

No, the template is designed to pull content from Hygraph. You need to create a project there and provide its endpoint. The demo gives an idea of the expected data shape.