Build modern, SEO ready commerce storefronts with GraphCMS, Next.js, Stripe and Tailwind CSS
This project is an example of how to build fully-functioning Next.js commerce storefront with GraphCMS and Stripe. View the demo on https://commerce.withheadlesscms.com/.
getStaticProps
and getStaticPaths
.react-use-cart
.This reference application requires a Stripe account
degit
and install project dependencies.npx degit GraphCMS/graphcms-commerce-starter#main graphcms-commerce-starter
cd graphcms-commerce-starter
yarn
Create a new GraphCMS 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 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=
Setup a Stripe webhook for the checkout.session.completed
event to order to enable GraphCMS fulfilment via the mutation API.
Configure support for more locales or currencies in graphcms.config.js
if required. Learn more here.
Run yarn dev
Project configuration for supported locales and currencies is managed in graphcms.config.js
.
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'
}
]
}