Commercejs Nextjs is an open-source ecommerce starter template that builds a complete storefront on Next.js with Commerce.js, Algolia search, and Stripe payment, using the demo store "Plant Life" to show a working plant shop.
What is Commercejs Nextjs?
Commercejs Nextjs is a Next.js application written in TypeScript that uses Commerce.js (Chec) as its headless commerce backend to fetch product data, Algolia to power the storefront's advanced search, and Stripe to process payments. The template outputs a full storefront with a homepage, product detail pages, a rewards page, and testimonials, styled with Tailwind CSS. It was published by GitHub user Mostafa Waleed under the repository MostafaWaleed0/commercejs-nextjs, and its live demo is deployed to Vercel at plant-life-gamma.vercel.app.
Key Features
- Commerce.js integration — product listings, product pages, and the shopping experience pull data from the Commerce.js (Chec) headless commerce platform via the Chec CDN, as seen in product image URLs like cdn.chec.io.
- Algolia search — a search bar on the homepage delivers advanced search functionality through Algolia, one of the repository's declared topics.
- Stripe checkout — Stripe is declared as a topic and integrated for handling ecommerce payments.
- Next.js and React — the template runs on Next.js with React components, written in TypeScript (the repository's primary language).
- Tailwind CSS — the UI is styled with Tailwind CSS utility classes, and the repo lists tailwindcss as a topic.
- Product detail pages — each product gets its own route such as /product/AnxsLB for the Peperomia Ginny, displaying an image and a USD price (e.g., $70).
- Rewards program — a "sign up for our rewards program" section links to a dedicated /rewards page.
- Testimonials — the homepage includes a "What people are saying" section with customer quotes.
Who is it for?
Commercejs Nextjs is for developers who want a ready-made starting point for an ecommerce storefront in Next.js and don't want to wire up Commerce.js, Algolia, and Stripe from scratch. It suits agencies and freelancers delivering storefronts to clients, as they can replace the plant catalog with the client's products through Commerce.js and redeploy to Vercel. It's also useful for developers learning how a headless commerce stack combines product data, search, and payments in a single TypeScript codebase.
What can you do with it?
- Launch a demo storefront — deploy the included store to Vercel under your own domain, using the live demo at plant-life-gamma.vercel.app as a reference.
- Experiment with Algolia search — use the live plant store's search bar to see how products are filtered and displayed by Algolia before customizing the implementation.
- Add a customer loyalty flow — use the rewards program page as the starting point for a signup and points system, since it already contains a signup call-to-action.
How does Commercejs Nextjs work?
The template's product data comes from Commerce.js, with images served from Chec's CDN and product pages generated at routes like /product/AnxsLB. The search bar connects to Algolia, and checkout goes through Stripe. The demo runs on Vercel, so the intended deployment path is to push the repository to a Vercel project.
Alternatives
- Next.js Commerce — Vercel's official ecommerce storefront template for Next.js, which also uses Stripe for payments but is not tied to Commerce.js or Algolia out of the box.
FAQ
Is Commercejs Nextjs free to use?
Yes, the source code is available in a public GitHub repository, so you can clone, modify, and deploy the template for your own projects without paying a license fee.
What technology stack does Commercejs Nextjs use?
The template uses Next.js for the React framework, TypeScript for the language, Tailwind CSS for styling, Commerce.js (Chec) for the store backend, Algolia for search, and Stripe for payment processing.
Can I change the store from plants to another product category?
Because products are loaded from Commerce.js, you can manage the catalog in your Commerce.js dashboard and the storefront will render whatever products are configured there. The plant store is only the demo content.
