A high-perfomance, server-rendered Next.js App Router ecommerce application.
This template uses React Server Components, Server Actions, Suspense
, useOptimistic
, and more.
Note: Looking for Next.js Commerce v1? View the code, demo, and release notes.
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.
Note: Providers, if you are looking to use similar products for your demo, you can download these assets.
Integrations enable upgraded or additional functionality for Next.js Commerce
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.
npm i -g vercel
.vercel
directory): vercel link
vercel env pull
pnpm installpnpm dev
Your app should now be running on localhost:3000.
vc link
.Vercel Solutions
scope.commerce-shopify
project.vc env pull
to get environment variables.pnpm dev
to ensure everything is working correctly.You can use this comprehensive integration guide 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.
A high-perfomance, server-rendered Next.js App Router ecommerce application.
This template uses React Server Components, Server Actions, Suspense
, useOptimistic
, and more.
Note: Looking for Next.js Commerce v1? View the code, demo, and release notes.
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.
Note: Providers, if you are looking to use similar products for your demo, you can download these assets.
Integrations enable upgraded or additional functionality for Next.js Commerce
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.
npm i -g vercel
.vercel
directory): vercel link
vercel env pull
pnpm installpnpm dev
Your app should now be running on localhost:3000.
vc link
.Vercel Solutions
scope.commerce-shopify
project.vc env pull
to get environment variables.pnpm dev
to ensure everything is working correctly.You can use this comprehensive integration guide 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.