Repository files navigation

A high-performance, 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 thecode,demo, andrelease notes.

Vercel will only be actively maintaining a Shopify versionas 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 thelib/shopify file with their own implementation while leaving the rest of the template mostly unchanged.

• Shopify (this repository)
• BigCommerce (Demo)
• Ecwid by Lightspeed (Demo)
• Geins (Demo)
• Medusa (Demo)
• Prodigy Commerce (Demo)
• Saleor (Demo)
• Shopware (Demo)
• Swell (Demo)
• Umbraco (Demo)
• Wix (Demo)
• Fourthwall (Demo)

Note: Providers, if you are looking to use similar products for your demo, you candownload 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.

• React Bricks (Demo)

  • Edit pages, product details, and footer content visually usingReact Bricks visual headless CMS.

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

pnpm installpnpm dev

Your app should now be running onlocalhost:3000.

You can use this comprehensiveintegration 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.