[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
# Next.js Commerce
A Next.js 14 and App Router-ready ecommerce template featuring:
- Next.js App Router
- Optimized for SEO using Next.js's Metadata
- React Server Components (RSCs) and Suspense
- Server Actions for mutations
- Edge Runtime
- New fetching and caching paradigms
- Dynamic OG images
- Styling with Tailwind CSS
- Checkout and payments with Shopify
- Automatic light/dark mode based on system settings
- Shopify analytics
> Note: Looking for Next.js Commerce v1? View
> the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store),
> and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
## Providers
Vercel will only be actively maintaining a Shopify
version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and
listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with
their own implementation while leaving the rest of the template mostly unchanged.
- Shopify (this repository)
- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
> Note: Providers, if you are looking to use similar products for your demo, you
> can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
## Integrations
Integrations enable upgraded or additional functionality for Next.js Commerce
- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
- Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based
configuration.
- Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
## Shopify analytics
For Shopify's ADD_TO_CART analytics to function properly, it's important to note that they will not work with localhost
links directly due to cookie handling. To enable these analytics features during local development, tools like ngrok can
be used to expose your local environment to the internet with a stable, consistent URL, facilitating the necessary
cookie management.
- Install ngrok: First, visit ngrok's website to download and install ngrok. This tool will create a secure tunnel to
your localhost, making it accessible over the internet.
- Set Up a Custom Domain with ngrok: After installation, set up a custom domain through ngrok. This step is crucial as
it ensures URL consistency, which helps in maintaining the cookies required for Shopify analytics.
- Expose Your Local Development Server: Suppose your local development server is running on port 3000. You can then
expose it to the internet with the following ngrok command:
```bash
ngrok http --domain=YOUR_NGROK_DOMAIN 3000
```
## Running locally
You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's
recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for
this, but a `.env` file is all that is necessary.
> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify
> store.
1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
3. Download your environment variables: `vercel env pull`
```bash
pnpm install
pnpm dev
```
Your app should now be running on [localhost:3000](http://localhost:3000/).
Expand if you work at Vercel and want to run locally and / or contribute
1. Run `vc link`.
1. Select the `Vercel Solutions` scope.
1. Connect to the existing `commerce-shopify` project.
1. Run `vc env pull` to get environment variables.
1. Run `pnpm dev` to ensure everything is working correctly.
## Vercel, Next.js Commerce, and Shopify Integration Guide
You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step
instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on
Vercel.