Creating a Next.js storefront with GraphCMS

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

• Fully localized product catalogue built with GraphCMS localization and Next.js.
• Pre-rendered catalogue pages via getStaticProps and getStaticPaths.
• Dynamic client-side data fetching via SWR.
• Localized shopping cart with react-use-cart.
• Hosted checkout and payment flow with Stripe Checkout.
• Use the GraphCMS mutation API with API Routes to create orders on successful checkout (via webhook).
• Multiple currency support.

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.

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.

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!