Next.js + BigCommerce Starter - Vercel

Next.js + BigCommerce Starter

A Next.js 14 and App Router-ready headless storefront template for BigCommerce.

Next.js Commerce for BigCommerce

This is our fork of Vercel's Next.js storefront starter.

[!NOTE] ✨ Looking for more out-of-the-box ecommerce functionality? Try Catalyst, BigCommerce's reference storefront for Next.js. ✨

Catalyst is our first-party developed and fully supported Next.js storefront, offering:

Deep integration with our 100s of commerce features, all powered by GraphQL

Fully customizable UI kit built specifically for ecommerce

Easily configurable multi-region and multi-lingual storefront support

Learn more at catalyst.dev →

Prerequisites

This starter 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.

Develop locally

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.

Install the Vercel CLI:

npm i -g vercel

Link your local instance with the desired Vercel and GitHub accounts. This action creates a .vercel directory:

vercel link

Download the Vercel environment variables:

vercel env pull

Install the app's default dependencies and start the development server:

pnpm install
pnpm dev

The app runs on localhost:3000.

Configure checkout

Optimized One-Page Checkout
Stencil theme to customize checkout page and inform styling of shopper emails

Get to know the BigCommerce GraphQL Storefront API

In addition to being compatible with BigCommerce's multi-storefront features, this starter 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.