A Next.js 14 and App Router-ready headless storefront template for BigCommerce.
A Next.js 14 and App Router-ready headless storefront template for BigCommerce, featuring:
Learn more about our suite of Next.js 13+ tools for enterprise commerce: https://developer.bigcommerce.com/catalyst
Next.js + BigCommerce requires a BigCommerce sandbox or a production store provisioned to run a headless storefront.
To get started, use this README and the example environment variable comments.
To automatically clone the template repo and configure Vercel environment variables for your project, use the Deploy with Vercel button at the beginning of this README. After you complete the interactive configuration sequence, you can clone the automatically-created project to your local environment.
You can also clone the template repo manually and supply the environment variables defined in .env.example. The best practice is to use Vercel environment variables for this, but a .env
file is all that is necessary.
Note: Do not commit your
.env
file. It exposes secrets that allow others to control your BigCommerce store.
npm i -g vercel
.vercel
directory:
vercel link
vercel env pull
pnpm installpnpm dev
The app runs on localhost:3000.
In addition to being compatible with BigCommerce's multi-storefront features, Next.js + BigCommerce uses the GraphQL Storefront API. This API makes it possible for merchants to control the representation of products and categories, carts, orders, customer segmentation, and more. To get a sense of what is possible to do directly on the storefront, check out the GraphQL Playground.
When you access the Playground through the store control panel, BigCommerce provides a valid GraphQL Storefront authentication token without any additional API calls on your part. To access the dedicated GraphQL Playground for a particular sandbox or store, sign in to its BigCommerce account and navigate to Settings > API, then click Storefront API Playground.
BigCommerce's open SaaS feature set powers your store. Visit the BigCommerce developer documentation to learn more about your options for the following features:
Core store configuration:
Shopper journeys:
We invite you to give feedback and ask questions in our Developer Community BigCommerceDevs Slack or on our Discord server.
A Next.js 14 and App Router-ready headless storefront template for BigCommerce.
A Next.js 14 and App Router-ready headless storefront template for BigCommerce, featuring:
Learn more about our suite of Next.js 13+ tools for enterprise commerce: https://developer.bigcommerce.com/catalyst
Next.js + BigCommerce requires a BigCommerce sandbox or a production store provisioned to run a headless storefront.
To get started, use this README and the example environment variable comments.
To automatically clone the template repo and configure Vercel environment variables for your project, use the Deploy with Vercel button at the beginning of this README. After you complete the interactive configuration sequence, you can clone the automatically-created project to your local environment.
You can also clone the template repo manually and supply the environment variables defined in .env.example. The best practice is to use Vercel environment variables for this, but a .env
file is all that is necessary.
Note: Do not commit your
.env
file. It exposes secrets that allow others to control your BigCommerce store.
npm i -g vercel
.vercel
directory:
vercel link
vercel env pull
pnpm installpnpm dev
The app runs on localhost:3000.
In addition to being compatible with BigCommerce's multi-storefront features, Next.js + BigCommerce uses the GraphQL Storefront API. This API makes it possible for merchants to control the representation of products and categories, carts, orders, customer segmentation, and more. To get a sense of what is possible to do directly on the storefront, check out the GraphQL Playground.
When you access the Playground through the store control panel, BigCommerce provides a valid GraphQL Storefront authentication token without any additional API calls on your part. To access the dedicated GraphQL Playground for a particular sandbox or store, sign in to its BigCommerce account and navigate to Settings > API, then click Storefront API Playground.
BigCommerce's open SaaS feature set powers your store. Visit the BigCommerce developer documentation to learn more about your options for the following features:
Core store configuration:
Shopper journeys:
We invite you to give feedback and ask questions in our Developer Community BigCommerceDevs Slack or on our Discord server.