Hygraph Commerce Starter

Build modern, SEO ready commerce storefronts with Hygraph, Next.js, Stripe and Tailwind CSS

Clone project Deploy with Vercel

About

This project is an example of how to build fully-functioning Next.js commerce storefront with Hygraph and Stripe. View the demo on https://commerce.withheadlesscms.com/.

Features

Usage

This reference application requires a Stripe account

  1. Clone the repository with degit and install project dependencies.
npx degit Hygraph/hygraph-commerce-starter#main hygraph-commerce-starter
cd hygraph-commerce-starter
yarn
  1. Create a new Hygraph project using the Commerce Starter template.

  2. Add a .env file by cloning .env.sample and providing the required variable values.

It is recommended you create separate Hygraph 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=
  1. Setup a Stripe webhook for the checkout.session.completed event to order to enable Hygraph fulfilment via the mutation API.

  2. Configure support for more locales or currencies in hygraph.config.js if required. Learn more here.

  3. Run yarn dev

Configuration

Project configuration for supported locales and currencies is managed in hygraph.config.js.

It is important that the locales array reflects the enabled locales in your Hygraph project.

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