Commerce.js Next.js Demo Store is an open-source eCommerce starter template that pairs the Commerce.js v2 SDK with Next.js to deliver a complete storefront, ready for one-click deployment to Netlify.
What is Commerce.js Next.js Demo Store?
This template is a fully-fledged eCommerce demo store built with the Commerce.js v2 SDK and Next.js. It takes as input your Chec merchant account credentials (a public key and a secret key) and produces a live storefront with a product catalog, categories, variants, cart, checkout, customer login, order confirmation, and printable receipts. It runs on Next.js and is designed to deploy to Netlify, with both a one-click deploy option and manual Git-based deployment supported. The template is maintained by Chec, the company behind Commerce.js.
Key Features
- Commerce.js cart API — Carts persist for up to 30 days, and Commerce.js automatically remembers carts for returning visitors.
- Checkout utilities — The checkout integrates Commerce.js country and region APIs, the shipping methods API, and the discounts API to validate and apply discount codes in real time.
- Customer accounts — Commerce.js supports customer login without any server-side code; this template includes a customer login page that shows previous orders and pre-populates checkout with known details.
- Payment gateways — Includes the Chec test gateway out of the box, plus Stripe Elements support when Stripe is configured in the Chec Dashboard.
- Sample seed data — The
/seedsdirectory, combined with ayarn seedscript, populates your Chec account with sample products, categories, and assets so the storefront works immediately after setup. - Custom styling — Global styles are written using Bootstrap and SASS, and category feature images are stored in
public/images/collection. - One-click Netlify deploy — The one-click deploy connects Netlify to your GitHub account, clones the repository, and deploys the site automatically with the demo merchant's public key.
- Extensible architecture — Fork the project to add shipping zones, search functionality, webhooks for post-checkout actions, or A/B testing of checkout flows.
Who is it for?
- Developers — use it as a reference implementation for building a JAMstack eCommerce store with Commerce.js and Next.js, or customize the code to fit their own project.
- Agencies and freelancers — spin up a branded storefront for clients by swapping the sample data, category images, and styling with their own assets.
- Ecommerce entrepreneurs — get a live store running quickly via the one-click Netlify deploy, using the provided demo merchant public key to preview the storefront.
What can you do with it?
- Test Commerce.js features: explore cart persistence, checkout flows, discounts, and customer login without writing backend code.
- Customize products and categories: replace sample products in the Chec Dashboard and update category images under
public/images/collectionto match your inventory. - Deploy to any platform: while Netlify is the recommended host, the Next.js app can be deployed manually to other hosting platforms by setting the required environment variables.
- Extend with integrations: connect content management systems, fulfillment services, review APIs, or add webhooks to automate actions after checkout.
How does it work?
The template requires a Chec merchant account to supply API keys. After cloning the repository, copy .env.example to .env, add your public and secret keys, run yarn seed to populate your Chec account with sample data, then run yarn dev to start the development server on localhost:3000. For production, you can deploy via Netlify's one-click button or manual Git-based deployment using the included netlify.toml build settings.
FAQ
Is this template free?
Yes, the repository is open source and free to use. You will need a Chec account to obtain API keys; Chec offers a free tier, and the template works with the demo merchant's public key for a quick preview deploy.
Do I need to use Netlify?
No. The README highlights Netlify for one-click deployment, but the Next.js app can be deployed manually to any platform that supports Node.js by setting the same environment variables.
How do I set up Stripe payments?
Stripe is not enabled by default. You must enable it in the Chec Dashboard, add your sandbox or live keys, then configure the Stripe publishable key in your .env file. The template includes Stripe Elements support for the checkout.
Can I use my own products?
Yes, after seeding sample data you can edit products and categories in the Chec Dashboard. If you change category feature images, keep the file names matching under public/images/collection, or add new metadata via the Chec API.
What are the caveats with customizing data?
The demo store expects a specific inventory structure: categories must exist, and product assets must be assigned via the Chec API if you want multi-image products. The README notes that the one-click deploy with your own public key will fail unless your account has the appropriate assets and categories.
