> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Next.js + BigCommerce

> **Note**
>
> This is archived documentation. Next.js Commerce integration is no longer actively maintained. For current storefront options, see [Catalyst](/developer/docs/storefront/catalyst/getting-started) or [Headless](/developer/docs/storefront/headless).

> **Note**
>
> The preferred starting point for headless storefronts is now Catalyst. See the [Catalyst - Overview](https://catalyst.dev/docs) 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](/developer/docs/archive/storefront/nextjs-commerce/next-js-commerce-v-1).

## Features

Next.js + BigCommerce is a Next.js 13 and App Router-ready headless storefront template, featuring the following:

* [Next.js App Router](https://nextjs.org/docs/app)
* Optimized for SEO using [Next.js's Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
* [React Server Components (RSCs)](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) and [Suspense](https://react.dev/blog/2022/03/29/react-v18#suspense-in-data-frameworks)
* Route handlers for mutations
* Edge runtime
* New fetching and caching paradigms
* Dynamic OG images
* Styling with [Tailwind CSS](https://tailwindcss.com/)
* Automatic light/dark mode based on system settings

## Prerequisites

Next.js + BigCommerce requires a [BigCommerce sandbox](/developer/docs/overview/sandboxes) or a [production store provisioned to run a headless storefront](https://www.bigcommerce.com/solutions/multi-store/).

## Getting started

To get started, visit the [Next.js + BigCommerce repository (GitHub)](https://github.com/bigcommerce/nextjs-commerce). Use the [README](https://github.com/bigcommerce/nextjs-commerce/blob/main/README.md) and [Example environment variables file](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example) to get oriented. You can use the [Deploy with Vercel button (GitHub)](https://github.com/bigcommerce/nextjs-commerce) at the top of the README to configure Vercel environment variables and deploy your storefront, then use the [Vercel CLI (Vercel)](https://vercel.com/docs/cli) to develop locally and see your changes in deployment at will.

> **Note**
>
> **Looking for more?** \
>
> Learn more about our suite of Next.js 13+ tools for enterprise commerce, [Catalyst for Composable Commerce](https://www.catalyst.dev/).

## Resources

### BigCommerce

* [Get a BigCommerce sandbox](/developer/docs/overview/sandboxes)
* [Headless Multi-Storefront solutions](https://www.bigcommerce.com/solutions/multi-store/)
* [Next.js + BigCommerce repository (GitHub)](https://github.com/bigcommerce/nextjs-commerce)
  * [README](https://github.com/bigcommerce/nextjs-commerce/blob/main/README.md)
  * [Example environment variables file](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example)
  * [Button to deploy Next.js + BigCommerce with Vercel (GitHub)](https://github.com/bigcommerce/nextjs-commerce)
* [Legacy storefront documentation](/developer/docs/archive/storefront/nextjs-commerce/next-js-commerce-v-1)

### External

* [Vercel CLI](https://vercel.com/docs/cli)
* [Next.js App Router](https://nextjs.org/docs/app)
* [Next.js Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
* [React Server Components (RSCs)](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)
* [Suspense](https://react.dev/blog/2022/03/29/react-v18#suspense-in-data-frameworks)
* [Tailwind CSS](https://tailwindcss.com/)