IMPORTANT NOTES!!

Vercel's production instance is currently running on the sol/narai branch. For the latest stable version, please refer to that branch.
If you're making changes to the site, please make sure to create a new branch and submit a PR to the sol/preview branch. This is to ensure that the production instance is always stable.
The sol/preview branch should be reviewed and approved by the suginomori brewery team before merging to sol/narai and deploying to production.

Next.js Commerce

A Next.js 13 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

Providers

Vercel will only be actively maintaining a Shopify version as outlined in our vision and strategy for Next.js Commerce.

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 (Demo)
Medusa (Demo)
Saleor (Demo)
Shopware (Demo)
Swell (Demo)
Umbraco (Demo)
Wix (Demo)

Note: Providers, if you are looking to use similar products for your demo, you can download these assets.

Integrations

Integrations enable upgraded or additional functionality for Next.js Commerce

Orama (Demo)
- 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.

Running locally

You will need to use the environment variables defined in .env.example to run Next.js Commerce. It's recommended you use Vercel 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.

Install Vercel CLI: npm i -g vercel
Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Expand if you work at Vercel and want to run locally and / or contribute

Run vc link.
Select the Vercel Solutions scope.
Connect to the existing commerce-shopify project.
Run vc env pull to get environment variables.
Run pnpm dev to ensure everything is working correctly.

Vercel, Next.js Commerce, and Shopify Integration Guide