Next.js Commerce

The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully customize their own store. Start right now at nextjs.org/commerce

Demo live at: demo.vercel.store

This project is currently under development.

Features

• Performant by default
• SEO Ready
• Internationalization
• Responsive
• UI Components
• Theming
• Standardized Data Hooks
• Integrations - Integrate seamlessly with the most common ecommerce platforms.
• Dark Mode Support

Work in progress

We're using Github Projects to keep track of issues in progress and todo's. Here is our Board

Integrations

Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends.

Goals

• Next.js Commerce should have a completely data agnostic UI
• Aware of schema: should ship with the right data schemas and types.
• All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
• @framework will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. Note that the same applies for recipes using a CMS + an ecommerce provider.

There is a framework folder in the root folder that will contain multiple ecommerce providers.

Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) so we also have a feature API to disable/enable features in the UI.

People actively working on this project: @okbel & @lfades.

Framework

Framework is where the data comes from. It contains mostly hook handlers and functions.

Structure

Main folder and its exposed functions

• product

  • usePrice
  • useSearch
  • getProduct
  • getAllProducts

• wishlist

  • useWishlist
  • useAddItem
  • useRemoveItem

• auth

  • useLogin
  • useLogout
  • useSignup

• customer

  • useCustomer
  • getCustomerId
  • getCustomerWistlist

• cart

  • useCart
  • useAddItem
  • useRemoveItem
  • useUpdateItem

• config.json

• README.md

Example of correct usage of the Commerce Framework

import { useUI } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'

Configuration

How to change providers

First, update the provider selected in commerce.config.json:

{
  "provider": "bigcommerce",
  "features": {
    "wishlist": true
  }
}

Then, change the paths defined in tsconfig.json and update the @framework paths to point to the right folder provider:

"@framework": ["framework/bigcommerce"],
"@framework/*": ["framework/bigcommerce/*"]

Make sure to add the environment variables required by the new provider.

Features

Every provider defines the features that it supports under framework/{provider}/commerce.config.json

How to turn Features on and off

NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)

• Open commerce.config.json
• You'll see a config file like this:

  {
    "provider": "bigcommerce",
    "features": {
      "wishlist": false
    }
  }
  

• Turn wishlist on by setting wishlist to true.
• Run the app and the wishlist functionality should be back on.

How to create a new provider

We'd recommend to duplicate a provider folder and push your providers SDK.

If you succeeded building a provider, submit a PR so we can all enjoy it.

Contribute

Our commitment to Open Source can be found here.

1. Fork this repository to your own GitHub account and then clone it to your local device.
2. Create a new branch git checkout -b MY_BRANCH_NAME
3. Install yarn: npm install -g yarn
4. Install the dependencies: yarn
5. Duplicate .env.template and rename it to .env.local.
6. Add proper store values to .env.local.
7. Run yarn dev to build and watch for code changes
8. The development branch is canary (this is the branch pull requests should be made against). On a release, canary branch is rebased into master.

Troubleshoot

I already own a BigCommerce store. What should I do?

First thing you do is: set your environment variables

.env.local

BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
BIGCOMMERCE_CHANNEL_ID=<>

If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and Github accounts (creates .vercel file): vercel link
3. Download your environment variables: vercel env pull .env.local

Next, you're free to customize the starter. More updates coming soon. Stay tuned.

BigCommerce shows a Coming Soon page and requests a Preview Code

After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.

BigCommerce team has been notified and they plan to add more detailed about this subject.