A high-perfomance, server-rendered Next.js App Router ecommerce application.

This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more.

With React Bricks, you can edit the store pages and product details pages in a visual way.
React Bricks will keep this integration repository up-to-date with the Next.js Commerce repository.

In order to use this project with React Bricks visual headless CMS, you'll need to create a free React Bricks account, create a React Bricks App from the Dashboard and set the React Bricks App credentials in the .env file:

• API_KEY="xxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxxxxxxx"
• NEXT_PUBLIC_APP_ID="xxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxxxxxxx"
• NEXT_PUBLIC_ENVIRONMENT="main"
• REACT_BRICKS_REVALIDATE="1" (in production rise this value to 600 to leverage caching)

To set up the Medusa Store, you may follow the Medusa documentation.
Once you have the backend set up, you'll need to:

• Create all the collections
• Create all the products
• Create a page in React Bricks for each product, ensuring the "slug" matches the product slug on Medusa (this step won't be required any more in the future, as we'll automate it).

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 (Demo)
• BigCommerce (Demo)
• Ecwid by Lightspeed (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.

• React Bricks (Demo)

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

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 Medusa 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 install
pnpm dev

Your app should now be running on localhost:3000.