Next.js + BigCommerce
The preferred starting point for headless storefronts is now Catalyst. See the Catalyst - Overview (opens in a new tab) page to learn how you can use Catalyst to build a fully customizable headless ecommerce storefront for BigCommerce.
This article is about the Next.js + BigCommerce starter app, a BigCommerce-optimized version of Vercel's Next.js Commerce v2.
If you're looking for Next.js Commerce v1, you can learn more in our legacy storefront documentation.
Features
Next.js + BigCommerce is a Next.js 13 and App Router-ready headless storefront template, featuring the following:
- Next.js App Router (opens in a new tab)
- Optimized for SEO using Next.js's Metadata (opens in a new tab)
- React Server Components (RSCs) (opens in a new tab) and Suspense (opens in a new tab)
- Route handlers for mutations
- Edge runtime
- New fetching and caching paradigms
- Dynamic OG images
- Styling with Tailwind CSS (opens in a new tab)
- Automatic light/dark mode based on system settings
Prerequisites
Next.js + BigCommerce requires a BigCommerce sandbox or a production store provisioned to run a headless storefront (opens in a new tab).
Getting started
To get started, visit the Next.js + BigCommerce repository (GitHub) (opens in a new tab). Use the README (opens in a new tab) and Example environment variables file (opens in a new tab) to get oriented. You can use the Deploy with Vercel button (GitHub) (opens in a new tab) at the top of the README to configure Vercel environment variables and deploy your storefront, then use the Vercel CLI (Vercel) (opens in a new tab) to develop locally and see your changes in deployment at will.
Looking for more?
Learn more about our suite of Next.js 13+ tools for enterprise commerce, Catalyst for Composable Commerce (opens in a new tab).
Resources
BigCommerce
- Get a BigCommerce sandbox
- Headless Multi-Storefront solutions (opens in a new tab)
- Next.js + BigCommerce repository (GitHub) (opens in a new tab)
- Legacy storefront documentation
External
- Vercel CLI (opens in a new tab)
- Next.js App Router (opens in a new tab)
- Next.js Metadata (opens in a new tab)
- React Server Components (RSCs) (opens in a new tab)
- Suspense (opens in a new tab)
- Tailwind CSS (opens in a new tab)