João Pedro Schmitz

Marketing Engineer

This guide refers to the [Marketing Website](/use-cases/marketing-websites-and-seo) 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.

- [Check out the demo](https://marketing-websites.withheadlesscms.com/) →
- [Fork the repo](https://github.com/GraphCMS/reference-marketing-website) →
- [Learn more about this starter](/blog/official-graphcms-marketing-website-starter) →
- Get started with a GraphCMS project using the [Marketing Website starter](https://app.graphcms.com) →

## Quickstart

1. Clone the repository and install project dependencies

```shell
npx degit GraphCMS/reference-marketing-website#main reference-marketing-website
cd reference-marketing-website
yarn
```

2. **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.

```shell
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](https://graphcms.com/docs/guides/concepts/apis#working-with-apis).

```env
NEXT_PUBLIC_GRAPHCMS_URL=""
```

3. **Start building!**

```shell
yarn dev
```

[Get started with your own Marketing Website](https://app.graphcms.com) →

This guide covers how to build a fully functional Next.js Marketing Website using GraphCMS's template, styled with Chakra UI

Creating a Marketing Website with GraphCMS and Next.js

Ronak Ganatra

VP of Marketing

## About the Project

This project is an example of how to build a fully-functioning Next.js commerce storefront with GraphCMS and Stripe. [View the demo](https://commerce.withheadlesscms.com/) or fork the repo on [GitHub](https://github.com/GraphCMS/graphcms-commerce-starter/).

The template is available as a GraphCMS Starter, so you can create a new project with the content and schema ready from the `Create New Project` screen.


> If you’re planning to use this to create an eCommerce shop - in its current implementation, this reference application requires a Stripe account.

### Features

- Fully localized product catalogue built with [GraphCMS localization](https://graphcms.com/content-localization) and [Next.js](https://nextjs.org/docs/advanced-features/i18n-routing).
- Pre-rendered catalogue pages via [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation).
- Dynamic client-side data fetching via [SWR](https://swr.vercel.app).
- Localized shopping cart with [`react-use-cart`](https://github.com/notrab/react-use-cart).
- Hosted checkout and payment flow with [Stripe Checkout](https://stripe.com/docs/payments/checkout).
- Use the [GraphCMS mutation API](https://graphcms.com/mutation-api) with [API Routes](https://nextjs.org/docs/api-routes/introduction) to create orders on successful checkout (via webhook).
- Multiple currency support.

### Using this Reference Application

#### 1. Clone the repository with [`degit`](https://github.com/Rich-Harris/degit) and install project dependencies.

```bash
npx degit GraphCMS/graphcms-commerce-starter#main graphcms-commerce-starter
cd graphcms-commerce-starter
yarn
```

#### 2. Create a new GraphCMS project using the `Commerce Starter` template.

![Select the Commerce Starter](https://media.graphcms.com/JkucfyT7QtaZTxVATEDE)

When creating a new project, select a data center with the lowest latency to house your content.



#### 3. Add a `.env` file by cloning `.env.sample` and providing the required variable values.

> It is recommended you create separate GraphCMS [auth tokens](https://graphcms.com/docs/authorization#permanent-auth-tokens) to handle querying and mutating data.

```js
GRAPHCMS_MUTATION_TOKEN=
NEXT_PUBLIC_GRAPHCMS_TOKEN=
NEXT_PUBLIC_GRAPHCMS_URL=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
```

Within GraphCMS, you will first need to make your API accessible. You can do this under `Settings > API Access`, and define the default stage from which you can query content. You should set `Mutations` to active.

![Open Access to your API](https://media.graphcms.com/EjPo3msxRvue9PC9kUiM)

You can create [Permanent Auth Tokens](/docs/authorization#permanent-auth-tokens) in GraphCMS to query content from different stages.

#### 4. Setup a [Stripe webhook](https://stripe.com/docs/payments/handling-payment-events) for the `checkout.session.completed` event to enable GraphCMS fulfilment via the mutation API.

#### 5. Configure support for more locales or currencies in `graphcms.config.js` if required.

> It is important that the `locales` array reflects the enabled locales in your GraphCMS project.

```js
module.exports = {
  locales: [
    {
      value: 'en',
      label: 'English',
      default: true
    },
    {
      value: 'de',
      label: 'German'
    }
  ],
  currencies: [
    {
      code: 'GBP',
      default: true
    },
    {
      code: 'EUR'
    }
  ]
}
```


#### 6. Run `yarn dev`

You’re all set!


This guide covers how to build a fully-functioning Next.js commerce storefront with GraphCMS and Stripe, using the GraphCMS Commerce Starter.

Creating a Next.js storefront with GraphCMS

Jonathan Steele

Senior Marketing Engineer

## Why use Gatsby Cloud with GraphCMS?

Using Gatsby Cloud with your GraphCMS powered Gatsby site enables the following:

* Preview content changes using lightning fast **CMS Preview** builds. Any content changes on the **Draft** stage will automatically be updated and ready to preview in seconds.
* Incremental production builds that only rebuild the required changes. This results in faster builds and deployments for GraphCMS content on your **Published** stage.

## Prerequisites

This guide assumes the following:

1. You have a GraphCMS project. If not, create one [here](https://app.graphcms.com/).
2. You have a pre-existing Gatsby project that uses [`gatsby-source-graphcms`](https://github.com/GraphCMS/gatsby-source-graphcms) on GitHub or GitLab.
3. You are familiar with creating a Gatsby Cloud site from an existing GitHub or GitLab repository. Read [this guide](https://support.gatsbyjs.com/hc/en-us/articles/360059253654) for instructions on how to do this.

## Step 1: Create a new Gatsby Cloud site

*If you have a pre-existing GraphCMS powered Gatsby site in Gatsby Cloud, you can skip to [step 2](#step-2-gathering-required-gatsby-cloud-site-values).*
	
In Gatsby Cloud, create a new site by importing your pre-existing Gatsby project from a  GitHub repository. You can follow [this guide](https://support.gatsbyjs.com/hc/en-us/articles/360059253654) for instructions on how to do this.

During the setup process, you will be asked to provide any environment variables required for your Gatsby site to build. This will likely include the following:

* Your GraphCMS project URL (**required**).
* If configured, a [PAT](https://graphcms.com/docs/authorization#permanent-auth-tokens) (Permanent Auth Token) for the project.


Once configured, your new Gatsby Cloud site will build and be accessible in your dashboard.

## Step 2: Gathering required Gatsby Cloud site values

Before we can enable the Gatsby Cloud integration on our GraphCMS project, we need some details from our newly initialised Gatsby Cloud site.

Form the Gatsby Cloud dashboard, go to the site you want to work with, click **Site Settings**.

You will need to make note of your project’s **Prefix** as that will be needed for the GraphCMS setup.

![Gatsby Cloud project fields.png](https://media.graphcms.com/LaFMgZDTLmyIj7H3Po1K)

Now navigate to the **Webhook** section. In order to trigger new Gatsby Cloud builds for both the production and Preview instances, we need both the **Preview Webhook** and **Builds Webhook** URLs. These will be required during the Gatsby Cloud integration setup.

Be sure to check that CMS Preview builds are enabled to your Gatsby Site project. This can be done in the **Preview** section of the **Site Settings** page. *This is required!*

![Gatsby Clould enable CMS Previews.png](https://media.graphcms.com/9ZNcAJ2YRP2OFp3MmD3y)

## Step 3: Configure Gatsby Cloud for GraphCMS

![GraphCMS Gatsby Cloud integration.png](https://media.graphcms.com/Cu35v2NbQ1aPYKHfZnHz)

In your GraphCMS project dashboard, navigate to **Settings** and then **Integrations**. From here click **Gatsby Cloud** and then **Enable**.

![GraphCMS Gatsby Cloud enable.png](https://media.graphcms.com/oufHbZEQRlunMUEMKF74)

Populate the form fields with the values we just took from our Gatsby Cloud site and click **Enable**. 

![GraphCMS Gatsby Cloud configuration.png](https://media.graphcms.com/OAfBplDPSMekbuQswlKo)

## Step 4: Enjoy automated Preview and incremental deploys!

Once successfully enabled, your project will:

* Trigger a Gatsby Cloud CMS Preview build whenever you save **Draft** content changes.
* Trigger a Gatsby Cloud incremental build deployment whenever you push content changes to the **Published** stage.

![GraphCMS Gatsby Cloud preview button.png](https://media.graphcms.com/eekZ4Z20S7etk0RRbyX6)
	
Your content editing experience will now include a preview button direct to your Gatsby Cloud CMS Preview instance. CMS Preview builds are fast and the instance should automatically update in seconds.


Connect a Gatsby Cloud site to your GraphCMS project for CMS Previews and fast incremental builds.

Connecting your GraphCMS project to Gatsby Cloud

## About the Integration

The Vercel Integration allows you to seamlessly update your static deployments at the push of a button from within GraphCMS itself. Not to be confused with triggered builds via webhooks, this integration allows you to install a button in the GraphCMS sidebar of a content model for manual redeploys.

## What can you do with the Vercel integration in GraphCMS

- Trigger Vercel builds from within your content view with a single click.
- Specify which content models display the button in the sidebar, giving you more control over how builds are triggered when there are changes to your content.

## Set up the Vercel Integration in GraphCMS

### Step One: Activate the Vercel integration in GraphCMS

![Step 1 - Select Vercel from Integrations](https://media.graphcms.com/58VW70IUR3iwIGWsdDf3)

Log in to your GraphCMS project, and select `integrations` from the settings sidebar. 

![Step 2 - Enable the Vercel Integration for GraphCMS](https://media.graphcms.com/GfhAaYcQriEHaq13qyDw)

Select `Vercel` and enable the integration.

![Step 3 - Authorize your Vercel Account to be used with GraphCMS](https://media.graphcms.com/wlXkjdlcSHCP7vBgjEsX)

Connect to your Vercel account to allow the integration to work.

![Step 4 - Authorize GraphCMS in Vercel](https://media.graphcms.com/StfLLtMSLykFW91kCmUg)

Authorize the GraphCMS integration for your Vercel account.

### Step Two: Configure which content models to enable the integration for

![Step 5 - Select the projects and content models to activate the integration for](https://media.graphcms.com/j7itExYFTxKWRkn1f1IB)

Select the Vercel projects you want to connect to your GraphCMS project.

![Step 6 - Confirm your integration](https://media.graphcms.com/wwhueOJ8TlS5gfsKepZa)

Select which content models show the `deploy` button in the GraphCMS sidebar.

Note: Only content models selected will display the deploy button.

### Step Three: Update and deploy

![Step 7 - You’re all set!](https://media.graphcms.com/5G8o2YIQauYvHhlC0Gi7)

When creating, publishing, unpublishing, or editing content, simply click on `Start Building` to trigger a new Vercel build.

Seamlessly trigger GraphCMS builds and deploy projects with the integration for Vercel.

Working with the GraphCMS Vercel Integration

## About the Integration

![Netlify.png](https://media.graphcms.com/8UUVLVV1S8aA6M5eEo6d)

The integration allows you to update your static deployments via a button in the GraphCMS content view. Handled differently than by webhooks, the only configuration needed is connecting your GraphCMS project to your Netlify site/app and selecting which content entries can trigger a rebuild via the UI.

This integration allows you to install a button in the GraphCMS sidebar of a content model for manual redeploys, alongside a visual indicator of deployment status.

### What you can do with the GraphCMS-Netlify integration

- Trigger Netlify builds within your content view with a single click.
- View the status of your Netlify build without leaving the GraphCMS UI.
- Specify which content models display the button in the sidebar, giving you more control over how builds are triggered when there are changes to your content.

### Prerequisites to use this integration

- When using this integration, you should already have a static site deployed in an active Netlify project. Don’t have one? Set up a [free Netlify account](https://app.netlify.com/signup) or [learn about other plans](https://www.netlify.com/pricing)!
- You should have an existing GraphCMS project. Sign up for a [free GraphCMS developer account]](https://app.graphcms.com).
- Your Netlify site should be configured to support continuous deployment.

## How it works

Log in to your GraphCMS project and select **Integrations** from the sidebar.

![Netlify - Settings.png](https://media.graphcms.com/fS1UtkPS3imTdAgl3SYB)

Select Netlify, and enable the integration. Your GraphCMS user account should have the necessary permissions for this.

![Netlify - Enable.png](https://media.graphcms.com/avXCE3VKQugoLhDVRMjg)

Ensure that you're connected to your Netlify account so your Netlify sites can appear in the next step.

![Connect to Netlify.png](https://media.graphcms.com/jAIT6I8tSeix7R79zUBC)

Select the sites you want to enable the integration for and ensure that they have continuous deployment enabled.

![Netlify - Sites.png](https://media.graphcms.com/Nh5pcO5JTSe0D9C3S190)

Select the content models that should show the Netlify button in the sidebar. This could range from anything larger like pages and posts, or something granular like authors and headers. Any content change that could trigger a new deployment should have the button enabled.

![Netlify - Models.png](https://media.graphcms.com/W798Vh65TZuLjNScV3Sw)

When creating or editing published content, simply click on **Start Building Demo* to trigger a new build. You'll be able to see the status of your build once triggered within the sidebar itself.

![Netlify - Button.png](https://media.graphcms.com/Q6mSGzeUT7axihB42Jd0)

That's it, you're set!


Seamlessly trigger GraphCMS builds and deploy projects with the integration for Netlify.

Working with the GraphCMS Netlify Integration

Jamie Barton

Head of Developer Relations

If you are using Vercel for your deployments, you should check our official integration for a one-click build button. Alternatively, if you want a hands off approach, you can use GraphCMS webhooks to automatically deploy when content changes.

## Step 1: Create your deploy hook

Inside your Vercel project Git settings, scroll to the "Deploy Hooks" section. You'll want to specify the name of your hook, and the Git branch name you want to trigger a deployment for.

The name is only a reference to you, and you should never share these deployment URLs, as they're public, and don't require any authentication to call.

![Vercel Deploy Hooks form](https://media.graphcms.com/gy7AdNCmSyCxasaDoC0M)

Once you've configured your hook, create it, and copy the URL.

![Deploy published content on master](https://media.graphcms.com/UlDMCucZTsuEzi35CyAe)

## Step 2: Configure GraphCMS

Now inside your GraphCMS project, go to webhooks and click to create a new one.

Give your webhook a name, and paste your Vercel deploy hook URL inside the `URL` input. You can disable including the payload.
![GraphCMS webhook config](https://media.graphcms.com/MT0PkUrSPitdrL3vyyex)

Next you will want to configure the triggers which call the Vercel deploy hook. You can specify:

**Content Model**

You can specify one or more content models within your project that causes this webhook to trigger. If you don't specify any, then any content model will be linked to this webhook.

**Stage**

In some cases you may want to deploy a custom content stage such as DRAFT to a staging environment. When you need to do this, you'll most likely want to duplicate your project inside Vercel, connected to the same repo, and repeat step 1.

In this example, we'll select `Published` as the stage we're watching for content to be published to. This means if someone is drafting a post inside GraphCMS, then our Vercel deploy hook will not be called.

**Action**

You can specify one or more actions to watch to trigger your Vercel build hook. In this example, we want to redeploy our Vercel project whenever content is published, or unpublished, so we'll opt to leave this field empty.

![GraphCMS webhook triggers](https://media.graphcms.com/nd64sw0ZRKYEOJpySM8Q)

## Step 3: Publish content and deploy

Now head to your content editor, make a change, and click "Save and publish". You'll then notice inside your Vercel deployments list there is a new build.

![Save and publish button](https://media.graphcms.com/DA5gbTdTYmFlbw1VHWQJ)

That's it!

The Emergence of Composable DXPs

Guides

Creating a Marketing Website with GraphCMS and Next.js

Creating a Next.js storefront with GraphCMS

Connecting your GraphCMS project to Gatsby Cloud

Working with the GraphCMS Vercel Integration

Working with the GraphCMS Netlify Integration

Deploy your Vercel project with GraphCMS webhooks in 3 easy steps

It's Easy To Get Started