Next.jsReactE-commerce

ecommerce-using-Next.js — Next.js Ecommerce Template

By ramandarizal90-art

A Next.js and TypeScript e-commerce storefront template that connects to the Boundless Commerce headless CMS, including product catalog, filtering, cart, and checkout flow.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-04View source

What stands out

A quick read of the recorded project description.

01

E-commerce storefront template written in Next.js and TypeScript

02

Connects to the Boundless Commerce headless e-commerce CMS API

03

Includes hierarchical product catalog, product components, and filtering

04

Provides marketing display components such as carousels and sliders

05

Built-in animated cart component and customizable React checkout flow

06

Includes SEO-related configurations such as schema markup, sitemap, and meta tags

Template Details

This template is a Next.js (TypeScript) front-end project for e-commerce scenarios and must be used with the Boundless Commerce headless e-commerce CMS. The repository provides a complete product display and purchase path: hierarchical product catalog, product components, filtering, carousel and other marketing modules, as well as an animated cart component and a customizable React checkout flow. For SEO, the template includes schema structured markup, sitemap, and meta tags, and provides mobile adaptation. Before use, you need to register an account with Boundless Commerce and create an access token, write the token and instance ID into environment variables, then install dependencies and start the local development server. The project is under the MIT license and can be used, modified, and distributed for free, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services such as domain, hosting, database, or payment may incur costs.

Next.jsE-commerce

Is it right for your project?

Use Cases

  • Build a branded e-commerce storefront for a Boundless Commerce instance
  • Use as starter code for a Next.js e-commerce project for further development
  • Demonstrate the catalog, cart, and checkout flow of a headless e-commerce CMS decoupled from the front end

Suitable For

  • Developers who already use or plan to use Boundless Commerce as the backend
  • Teams familiar with Next.js and TypeScript that need an e-commerce front-end starting point
  • Projects that need basic product catalog, filtering, cart, and checkout functionality

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Register a free account with Boundless Commerce and create an access token in the Access tokens section of the control panel

  2. 2

    Copy .env.example to .env and fill in BOUNDLESS_API_PERMANENT_TOKEN and BOUNDLESS_INSTANCE_ID

  3. 3

    If sitemap.xml and OpenGraph require absolute URLs, set BOUNDLESS_BASE_URL

  4. 4

    Optionally set BOUNDLESS_PRODUCTS_IMAGE_PROPORTION to unify the image aspect ratio for product listings, with values such as 1-1, 16-9, etc.

  5. 5

    Run yarn install to install dependencies, then run yarn dev to start the local server and visit http://localhost:3000

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Before using the template, you must register an account on the Boundless Commerce website (free, no credit card required) and create an access token.
  • You must write the Boundless Commerce API permanent token and instance ID into the .env environment variables, otherwise the backend cannot be connected.
  • By default, it relies on the Boundless Commerce hosted service; self-hosting the backend is only optional and requires separate deployment.
  • Demo images, fonts, icons, and other third-party assets require verification under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Go to [Boundless-commerce.com](https://boundless-commerce.com/) and create a free account (no credit card required).

Original README

put values for the `BOUNDLESS_API_PERMANENT_TOKEN` and `BOUNDLESS_INSTANCE_ID`, copy values from:

Original README

There is an option for Running Boundless-Commerce on your own server.

Original README
https://github.com/ramandarizal90-art/ecommerce-using-Next.js/blob/master/LICENSEhttps://github.com/ramandarizal90-art/ecommerce-using-Next.js/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-04. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 71 / 100
Technologies
Next.js · React
Website type
E-commerce
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-02-14
Screenshot last checked
2026-10-04

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-04

Inspect the recorded source material

SHA-256: 343dccf9fefdc61c5aaebe58cd6f1e0cb0cb5dc760bf436f3a528752c4032e1d

2026-10-04T03:10:05.118Z

Source file / repository
# Next.js E-Commerce template

Ready to use [Next.js](https://nextjs.org) (TypeScript) starter kit for high-performance 
e-commerce websites 🔥.

Free 👍. Ready to use 😎. Just clone & deploy! 🤘

## Online Demo ⚡️

[blank.demos.my-boundless.app](https://blank.demos.my-boundless.app/) - deployed to Netlify.

## About Boundless Commerce

![Boundless-commerce.com](assets/logo.svg)

[Boundless-commerce.com](https://boundless-commerce.com/) - API’s First Headless E-commerce CMS: We Provide An 
Admin-Side For Store Management, Powerful API, And Ready-To-Use Checkout Area.

## Self-Hosted solution

There is an option for Running Boundless-Commerce on your own server. Read more at [Open-Source Headless eCommerce Platform](https://boundless-commerce.com/open-source)

## Getting Started

1. Go to [Boundless-commerce.com](https://boundless-commerce.com/) and create a free account (no credit card required).
2. Go to "Control panel" -> "Settings" -> "Access tokens" and create a new one: 

![](assets/settings-menu.png)
![](assets/create-access-token-btn.png)

3. Copy `.env.example` to `.env`
4. Modify `.env`: put values for the `BOUNDLESS_API_PERMANENT_TOKEN` and `BOUNDLESS_INSTANCE_ID`, copy values from:

![](assets/copy-credentials.png)

5. Install dependencies: `yarn install`
6. `yarn dev` - to start locally, then open `http://localhost:3000`
7. If you want to have absolute URLs in the sitemap.xml and OpenGraph meta tags 
you need to also specify `BOUNDLESS_BASE_URL`.

### Optional parameters

- `BOUNDLESS_BASE_URL` - Base URL if you want to have absolute 
URLs in the sitemap.xml and OpenGraph meta tags.
- `BOUNDLESS_PRODUCTS_IMAGE_PROPORTION` - Specify resize proportion so product images in lists have 
the same size. Possible values are: `1-1`, `2-3`, `3-2`,`4-5`, `5-4`, `3-4`, `4-3`, `16-9`, `9-16`.

## What is included?

Fully ready E-Commerce website with a hierarchical catalog, product widgets, 
filters, and marketing components like sliders and carousels.

We developed the template keeping SEO in mind: schema markup, sitemap, and 
all necessary meta-tags.

Shopping cart with a nice animated widget and [Fully customizable React checkout](https://github.com/kirill-zhirnov/boundless-checkout-react).

User friendly mobile version.

## Video tutorial

[![How to build React E-commerce Website with Next.js, TypeScript, and Redux in 2023 (Tutorial)](https://img.youtube.com/vi/BOZRLereGig/0.jpg)](https://youtu.be/BOZRLereGig "How to build React E-commerce Website with Next.js, TypeScript, and Redux in 2023 (Tutorial)")

## Ways to deploy Node.js Apps

[![Ways to deploy NodeJs (and/or NextJS) apps - quick overview](https://img.youtube.com/vi/pRj0o-B57O4/0.jpg)](https://www.youtube.com/watch?v=pRj0o-B57O4 " Ways to deploy NodeJs (and/or NextJS) apps - quick overview")

---

[NextJS eCommerce templates](https://boundless-commerce.com/templates) - Free. Ready to use. Just clone & deploy!
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

Next.js Commerce

Next.js Commerce

Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.

Next.js · E-commerce

commerceplate

commerceplate

A free Shopify e-commerce starter template built with Next.js 16, Tailwind CSS 4, and TypeScript, using the Shopify Storefront API (GraphQL).

Next.js · E-commerce

ecommerce-template

ecommerce-template

A Next.js App Router ecommerce template built with TypeScript, Tailwind CSS, Radix UI, and TanStack Query.

Next.js · E-commerce

boundless-nextjs-ecommerce-template

boundless-nextjs-ecommerce-template

A free Next.js and TypeScript e-commerce frontend starter kit from Boundless Commerce.

Next.js · E-commerce

mobile-medusa

mobile-medusa

Mobile Medusa is an Expo-based React Native mobile e-commerce starter template that connects to a Medusa backend and aligns its pages and user flows with the Medusa Next.js Starter.

Next.js · E-commerce

template-ecommerce-webapp-nextjs

template-ecommerce-webapp-nextjs

An official Contentful-maintained Next.js ecommerce starter template that fetches content via the Contentful GraphQL API and uses graphql-codegen to generate a type-safe SDK.

Next.js · E-commerce