Next.js v14 E-commerce Starter Kit

The Next.js v14 E-commerce Starter Kit is a free, open-source storefront boilerplate that pairs a Next.js 14 App Router front end with the Boundless Commerce headless e-commerce CMS, giving you a ready-to-deploy shop with three checkout flows.

What is the Next.js v14 E-commerce Starter Kit?

This starter kit is a TypeScript-based Next.js v14 project that implements a complete e-commerce storefront front end. It consumes the Boundless Commerce API for product data, cart operations, and checkout, and it includes ready-made pages for authentication, order history, and a webhook handler for cache invalidation. The template is published on GitHub, is free to use, and targets developers who want to launch a store quickly without building the frontend plumbing themselves.

Key Features

• Three checkout flows — Stripe Checkout, Boundless Checkout with PayPal, and a custom checkout form, allowing you to compare payment gateway integration patterns.
• Authentication — sign up, sign in, password restore, and sign out flows are pre-built, leveraging the Boundless Commerce customer API.
• My orders page — authenticated customers can view their order history directly in the storefront.
• Boundless webhook handler — an API route at /api/on-update-hook that invalidates Next.js cache when products, categories, or other entities change, with a WEBHOOK_SIGN_KEY secret for verification.
• Simple dependency footprint — intentionally avoids Redux and similar state libraries, keeping the codebase readable for learning.
• Environment-based configuration — uses .env.local with tokens for Boundless API and optional Stripe keys; includes .env.example.
• Self-hosting support — Boundless Commerce can be run on your own server for projects that need full control.

Who is it for?

• Developers building an e-commerce storefront — they can clone the repo, set up a Boundless account, and have a working shop with payments in minutes.
• Agencies prototyping online stores — the multiple checkout flows serve as reference implementations when pitching payment integrations to clients.
• Developers learning headless commerce — the codebase shows how to integrate a Next.js App Router app with an external e-commerce API, including webhooks and auth.

What can you do with it?

• Launch a demo store — connect the kit to a free Boundless Commerce instance and deploy to Vercel using the provided demo as a reference (demo at nextjs-ecommerce-starter-kit.vercel.app).
• Explore payment gateway integration — study how Stripe Checkout, PayPal via Boundless, and a custom form are each implemented side by side.
• Build a custom storefront — replace the default styling and add your own pages while relying on the existing auth, orders, and webhook plumbing.

Getting Started

The README docs a five-step setup: create a free Boundless Commerce account, generate an access token in the control panel, copy .env.example to .env.local, fill in the Boundless tokens and optional Stripe keys, then run npm install and npm run dev at localhost:3000. For webhooks, create a webhook in the Boundless control panel pointing to /api/on-update-hook and set the WEBHOOK_SIGN_KEY environment variable. This is enough to get the store running locally.