hygraph-commerce-starter
hygraph-commerce-starter copied to clipboard
Hygraph Commerce Starter
Build modern, SEO ready commerce storefronts with Hygraph, Next.js, Stripe and Tailwind CSS
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
- Fully localized product catalogue built with Hygraph localization and Next.js.
- Pre-rendered catalogue pages via
getStaticProps
andgetStaticPaths
. - Dynamic client-side data fetching via SWR.
- Localized shopping cart with
react-use-cart
. - Hosted checkout and payment flow with Stripe Checkout.
- Use the Hygraph mutation API with API Routes to create orders on successful checkout (via webhook).
- Multiple currency support.
Usage
This reference application requires a Stripe account
- Clone the repository with
degit
and install project dependencies.
npx degit Hygraph/hygraph-commerce-starter#main hygraph-commerce-starter
cd hygraph-commerce-starter
yarn
-
Create a new Hygraph project using the
Commerce Starter
template. -
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=
-
Setup a Stripe webhook for the
checkout.session.completed
event to order to enable Hygraph fulfilment via the mutation API. -
Configure support for more locales or currencies in
hygraph.config.js
if required. Learn more here. -
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'
}
]
}