Creating a Next.js storefront with GraphCMS

Ronak Ganatra
Ronak Ganatra

March 29, 2021

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 or fork the repo on GitHub.

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

Using this Reference Application

1. Clone the repository with degit and install project dependencies.

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

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 to handle querying and mutating data.

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

You can create Permanent Auth Tokens in GraphCMS to query content from different stages.

4. Setup a Stripe webhook 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.

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!


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

This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy