For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
  • Overview
    • Quick Start
    • Sandboxes
    • Tools & SDKs
    • Support
  • Docs
    • Archive
          • Next.js Commerce v1
          • Next.js Commerce v2
    • Closed Beta Programs
Dev Portal
LogoLogo
On this page
  • Features
  • Prerequisites
  • Getting started
  • Resources
  • BigCommerce
  • External
ArchiveStorefrontNext.js Commerce

Next.js + BigCommerce

Deprecated
Was this page helpful?
Previous

Next.js Commerce Quick Start

Next

ReCaptcha 2

Built with
This is archived documentation. Next.js Commerce integration is no longer actively maintained. For current storefront options, see Catalyst or Headless.

The preferred starting point for headless storefronts is now Catalyst. See the Catalyst - Overview 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
  • Optimized for SEO using Next.js’s Metadata
  • React Server Components (RSCs) and Suspense
  • Route handlers for mutations
  • Edge runtime
  • New fetching and caching paradigms
  • Dynamic OG images
  • Styling with Tailwind CSS
  • 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.

Getting started

To get started, visit the Next.js + BigCommerce repository (GitHub). Use the README and Example environment variables file to get oriented. You can use the Deploy with Vercel button (GitHub) at the top of the README to configure Vercel environment variables and deploy your storefront, then use the Vercel CLI (Vercel) 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.

Resources

BigCommerce

  • Get a BigCommerce sandbox
  • Headless Multi-Storefront solutions
  • Next.js + BigCommerce repository (GitHub)
    • README
    • Example environment variables file
    • Button to deploy Next.js + BigCommerce with Vercel (GitHub)
  • Legacy storefront documentation

External

  • Vercel CLI
  • Next.js App Router
  • Next.js Metadata
  • React Server Components (RSCs)
  • Suspense
  • Tailwind CSS