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, 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.
- 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 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.
- Visit https://[your-store-id].myshopify.com/shop.json
- Search for
shopId
and add it to theNEXT_PUBLIC_SHOPIFY_SHOP_ID
in your.env
file.
To test out Shopify analytics, in your localhost, you can use the following steps:
- Install ngrok
- Setup custom domain in ngrok dashboard
- Expose your local development server (e.g., running on port 3000) with a command:
ngrok http --domain=YOUR_NGROK_DOMAIN 3000
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.
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.