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.
- Fork this repository to your own GitHub account and then clone it to your local device.
- Create a new branch
git checkout -b MY_BRANCH_NAME
- Install yarn:
npm install -g yarn
- Install the dependencies:
yarn
- Duplicate
.env.template
and rename it to.env.local
. - Add proper store values to
.env.local
. - Run
yarn dev
to build and watch for code changes - The development branch is
canary
(this is the branch pull requests should be made against). On a release,canary
branch is rebased intomaster
.
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.
- Install Vercel CLI:
npm i -g vercel
- Link local instance with Vercel and Github accounts (creates .vercel file):
vercel link
- 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.