Creating a Marketing Website with GraphCMS and Next.js

João Pedro Schmitz
João Pedro Schmitz

June 15, 2021

This guide refers to the Marketing Website for SaaS Products built using GraphCMS, Next.js, and Chakra UI. The repository for this is open-source, so you can quickly prototype and iterate on your own website.

This is an official GraphCMS starter, available to create a new project on the app's project creation screen.

Quickstart

  1. Clone the repository and install project dependencies
npx degit GraphCMS/reference-marketing-website#main reference-marketing-website
cd reference-marketing-website
yarn
  1. Provide your GraphCMS project keys

In order to use this starter, you'll need to have created a new GraphCMS project using our Marketing Website Template.

Navigate into your new site’s directory and copy the .env.local.example file.

cp .env.local.example .env.local

Inside of your newly created .env.local file, provide values for the variable. These variables can be found in the project settings UI.

NEXT_PUBLIC_GRAPHCMS_URL=""
  1. Start building!
yarn dev

Get started with your own Marketing Website


It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs