Skip to content

Commit 710e05a

Browse files
authored
Create e-commerce guide
1 parent 906b12b commit 710e05a

File tree

1 file changed

+111
-0
lines changed

1 file changed

+111
-0
lines changed

Nextjs/e-commerce guide

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
job: read file before using
2+
reason: to skip if available
3+
Next.js Commerce
4+
5+
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
6+
7+
Demo live at: demo.vercel.store
8+
9+
Shopify Demo: https://shopify.vercel.store/
10+
Swell Demo: https://swell.vercel.store/
11+
BigCommerce Demo: https://bigcommerce.vercel.store/
12+
Vendure Demo: https://vendure.vercel.store
13+
Saleor Demo: https://saleor.vercel.store/
14+
Ordercloud Demo: https://ordercloud.vercel.store/
15+
Spree Demo: https://spree.vercel.store/
16+
Kibo Commerce Demo: https://kibocommerce.vercel.store/
17+
Commerce.js Demo: https://commercejs.vercel.store/
18+
SalesForce Cloud Commerce Demo: https://salesforce-cloud-commerce.vercel.store/
19+
Run minimal version locally
20+
21+
To run a minimal version of Next.js Commerce you can start with the default local provider @vercel/commerce-local that has all features disabled (cart, auth) and uses static files for the backend
22+
pnpm install & pnpm build # run these commands in the root folder of the mono repo
23+
pnpm dev # run this command in the site folder
24+
If you encounter any problems while installing and running for the first time, please see the Troubleshoot section
25+
Features
26+
27+
Performant by default
28+
SEO Ready
29+
Internationalization
30+
Responsive
31+
UI Components
32+
Theming
33+
Standardized Data Hooks
34+
Integrations - Integrate seamlessly with the most common ecommerce platforms.
35+
Dark Mode Support
36+
Integrations
37+
38+
Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Saleor, Vendure, Spree and Commerce.js. We plan to support all major ecommerce backends.
39+
40+
Considerations
41+
42+
packages/commerce contains all types, helpers and functions to be used as a base to build a new provider.
43+
Providers live under packages's root folder and they will extend Next.js Commerce types and functionality (packages/commerce).
44+
We have a Features API to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under features in commerce.config.json and if needed it can also be accessed programmatically.
45+
Each provider should add its corresponding next.config.js and commerce.config.json adding specific data related to the provider. For example in the case of BigCommerce, the images CDN and additional API routes.
46+
Configuration
47+
48+
How to change providers
49+
50+
Open site/.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 site/.env.template as the base).
51+
52+
The setup for Shopify would look like this for example:
53+
54+
COMMERCE_PROVIDER=@vercel/commerce-shopify
55+
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
56+
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
57+
Features
58+
59+
Every provider defines the features that it supports under packages/{provider}/src/commerce.config.json
60+
61+
Features Available
62+
63+
The following features can be enabled or disabled. This means that the UI will remove all code related to the feature. For example: turning cart off will disable Cart capabilities.
64+
65+
cart
66+
search
67+
wishlist
68+
customerAuth
69+
customCheckout
70+
How to turn Features on and off
71+
72+
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 of the box)
73+
Open site/commerce.config.json
74+
You'll see a config file like this:
75+
{
76+
"features": {
77+
"wishlist": false,
78+
"customCheckout": true
79+
}
80+
}
81+
Turn wishlist on by setting wishlist to true.
82+
Run the app and the wishlist functionality should be back on.
83+
How to create a new provider
84+
85+
Follow our docs for Adding a new Commerce Provider.
86+
87+
If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.
88+
89+
Contribute
90+
91+
Our commitment to Open Source can be found here.
92+
93+
Fork this repository to your own GitHub account and then clone it to your local device.
94+
Create a new branch git checkout -b MY_BRANCH_NAME
95+
Install the dependencies: pnpm install
96+
Build the packages: pnpm build
97+
Duplicate site/.env.template and rename it to site/.env.local
98+
Add proper store values to site/.env.local
99+
Run cd site & pnpm dev to watch for code changes
100+
Run pnpm turbo run build to check the build after your changes
101+
Work in progress
102+
103+
We're using Github Projects to keep track of issues in progress and todo's. Here is our Board
104+
105+
People actively working on this project: @okbel, @lfades, @dominiksipowicz, @gbibeaul.
106+
107+
Troubleshoot
108+
109+
I don't own a BigCommerce store. What should I do?
110+
BigCommerce shows a Coming Soon page and requests a Preview Code
111+
When run locally I get `Error: Cannot find module '...@vercel/commerce/dist/config'`>o

0 commit comments

Comments
 (0)