Skip to content

Latest commit

 

History

History
72 lines (46 loc) · 2.38 KB

README.md

File metadata and controls

72 lines (46 loc) · 2.38 KB
Raw

reference-marketing-website

A Next.js starter for creating a SaaS Marketing Website with GraphCMS

• Demo

Quick start

  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

Next.js Preview Mode

If you want to enable Next.js Preview Mode you'll need to add the following to your .env:

GRAPHCMS_TOKEN=
GRAPHCMS_PREVIEW_TOKEN=
GRAPHCMS_PREVIEW_SECRET=

GRAPHCMS_TOKEN

This should be a Permanent Auth Token that is set to fetch content from PUBLISHED content stage by default.

GRAPHCMS_PREVIEW_TOKEN

This should be a Permanent Auth Token that is set to fetch content from DRAFT content stage by default.

GRAPHCMS_PREVIEW_SECRET

You'll need to make sure when configuring the Preview URL inside GraphCMS that it passes the same secret value you assigned to GRAPHCMS_PREVIEW_SECRET.

You'll need to update both the Page & Blog Post model to add a Preview URL. The URLs should look like this:

  • Page: https://]your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug={slug}
  • Blog Post: https://]your-domain.com]/api/preview?secret=[GRAPHCMS_PREVIEW_SECRET_VALUE_HERE]&slug=blog/{slug}

Features