MIT License
The Next.js Commerce Section and below are cloned OOTB from NextJS Commerce Starter. Here are some of my notes:
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
Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends.
framework/commerce
contains all types, helpers and functions to be used as base to build a new provider.framework
's root folder and they will extend Next.js Commerce types and functionality (framework/commerce
).features
in commerce.config.json
and if needed it can also be accessed programatically.next.config.js
and commerce.config.json
adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.framework/commerce
, on their own framework folder and on some dependencies included in package.json
Open .env.local
and change the value of COMMERCE_PROVIDER
to the provider you would like to use, then set the environment variables for that provider (use .env.template
as the base).
The setup for Shopify would look like this for example:
COMMERCE_PROVIDER=shopify
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
And change the tsconfig.json
to resolve to the chosen provider:
"@framework": ["framework/shopify"],
"@framework/*": ["framework/shopify/*"]
That's it!
Every provider defines the features that it supports under framework/{provider}/commerce.config.json
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)
commerce.config.json
{
"features": {
"wishlist": false
}
}
Follow our docs for Adding a new Commerce Provider.
If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.
Our commitment to Open Source can be found here.
git checkout -b MY_BRANCH_NAME
npm install -g yarn
yarn
.env.template
and rename it to .env.local
.env.local
yarn dev
to build and watch for code changesWe're using Github Projects to keep track of issues in progress and todo's. Here is our Board
People actively working on this project: @okbel & @lfades.
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.
npm i -g vercel
vercel link
vercel env pull .env.local
Next, you're free to customize the starter. More updates coming soon. Stay tuned.