Skip to content

Latest commit

 

History

History
106 lines (68 loc) · 5.8 KB

README.md

File metadata and controls

106 lines (68 loc) · 5.8 KB
Raw

Deploy with Vercel

Next.js Commerce with Wix Stores

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!

Setting up a Wix Store

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 Wix Store TL;DR

  • 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

Preparing your Wix Store content

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:

Categories

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.

Data Collections

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

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.

Running locally

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.