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

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

Together with a Wix Store for headless commerce featuring:

• Products & Collections Management
• Inventory management
• Cart and abandoned cart reminders
• Checkout pages
• Order management
• Much more!

For this template to fully function, you need to set up a Wix Store before developing.

Here you can find the full documentation on getting started with Wix Headless. Explore the documentation to learn more about building headless experiences with Wix.

• Create a new Project (Docs)
  • Be sure to select the ecommerce business solution
• Create an OAuth App for headless authentication (Docs)
• Copy the Client ID of your new OAuth App for use in your local environment

This template makes a few assumptions about the contents of your Wix Store. You can always change things later, but to get the initial template fully functioning, follow these instructions to prepare your store:

In your Wix Dashboard, access the Categories page (under Store Products -> Categories)and create the following categories:

• hidden-homepage-featured-items - These products will be displayed as featured products above the fold in the website homepage.
• hidden-homepage-carousel - These products will be displayed in a carousel on the bottom of the homepage.

You can create more collections (like Clothes, House Items, etc.) that will also be displayed on your site in the search results page.

Use Wix CMS to manage your site's content, such as menus and pages. The code in this templates assumes some data collections with a certain structure exist in the Wix CMS.

To create your data collections, go to the CMS in your Wix Dashboard sidebar and create the following collections using the Create Collection button:

• Pages - stores the content of the dynamic pages of your site

  • Collection Name: Pages
  • Collection ID: Pages

  Field Name	Key	Type
  Title	title	Text
  Slug	slug	Text
  SEO Title	seoTitle	Text
  SEO Description	seoDescription	Text
  Body	body	Rich Text

  • Create some pages for your store, for example: About page, Terms and Conditions, Shipping and Return Policy, FAQ, and more. You can use the Body field to add the content of the page. The SEO Title and SEO Description fields will be used to set the SEO metadata of the page.

• Menus - stores the top menu and footer menu details

  • Collection Name: Menus
  • Collection ID: Menus

  Field Name	Key	Type
  Pages	pages	Multi-Reference, Referenced Collection: Pages
  Slug	slug	Text

  • Create menus with the following slugs:
    • next-js-frontend-header-menu - Top menu of the site
    • next-js-frontend-footer-menu - Footer menu of the site

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. Be sure to set the value for WIX_CLIENT_ID to the Client ID from your Store's OAuth App.

Note: You should not commit your .env file or it will expose secrets that will allow others to control your 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.