Next.js eCommerce Storefront
An open source, production-ready Next.js eCommerce storefront from Spree Commerce. Next.js 16, React 19, TypeScript, Tailwind CSS 4, @spree/sdk, and swappable payment providers. Open source, free to fork, ready to deploy.
What ships with the Spree Commerce Next.js storefront
Spree Commerce’s open source Next.js eCommerce storefront is a production-ready starter for teams building headless commerce on Spree Commerce. Every page a working store needs is in the box, from the product catalog to a one-page checkout, and the code is free to fork so teams ship, own, and customize their storefront without vendor lock-in.
The stack is modern and opinionated: Next.js 16 with the App Router and Server Actions, React 19, TypeScript, Tailwind CSS 4, @spree/sdk, and @spree/next for typed Spree Commerce API calls with httpOnly cookies on the server side. The storefront talks to the Spree Commerce backend over the Spree Commerce Storefront API.
What ships in the box:
- Product catalog with category, search, and filters
- Product detail pages with variants, images, and inventory
- Cart and one-page checkout
- and Stripe as the default payment provider,
- with Apple Pay and Google Pay for quick checkout
- Klarna, Affirm, and SEPA Direct Debit wired alongside Stripe
- Customer account with order history, addresses, and saved payment methods
- Analytics and SEO prewired: GTM, GA4, JSON-LD, Sentry error reporting
- Server-side rendering for every page, clean SEO indexability out of the box
Easily replace Stripe with another payment provider using Payment Sessions.
Why we built our own open source Next.js commerce storefront
Vercel’s Next.js Commerce project was the canonical Next.js starter for ecommerce from 2020 through 2024. It’s no longer actively developed as a general-purpose commerce storefront; the Vercel repo now targets Shopify as its backend. Teams that were building on Next.js Commerce no longer have a canonical Next.js commerce starter backed by a modern headless backend.
Spree Commerce closed that gap. The open source Next.js storefront release shipped a complete stack: an MIT-licensed frontend, typed SDK packages for Next.js, and an App Router storefront that matches where the Next.js ecosystem is today. Teams who want a Next.js storefront with a real commerce backend behind it get both in one release.
The storefront is a separate repo from the commerce backend, so teams can replace it entirely or extend it in place. The Spree Commerce backend runs on a 10-plus-year open source foundation with BSD 3-Clause licensing.
Next.js as the head on a headless eCommerce platform
Spree Commerce is a headless eCommerce platform with a complete REST API that covers products, cart, checkout, customers, and orders. The Next.js storefront is one head on Spree Commerce, not the only supported head. Teams run the Next.js storefront in production while wiring mobile apps, POS terminals, or voice channels against the same Spree Commerce backend.
For teams evaluating composable and headless commerce, this answers the usual objection: headless commerce platforms that only ship APIs force you to build your own storefront. Spree Commerce ships both. Teams start with the reference storefront, fork it, and replace any part as they scale.
Cross-border storefront with Markets
Multi-region operators need local pricing, taxes, languages, and fulfillment rules without forking the storefront per country. Spree Commerce’s Markets feature handles that server-side, and the Next.js storefront picks it up through URL routing.
What each market carries on the same codebase:
- Its own currency, converted at configurable rates
- Its own language, with URL routing like
/us/en/products/de/de/products/fr/fr/products
- Local pricing rules and tax treatments
- Local checkout flows and payment methods
- Local fulfillment rules and shipping zones
- No per-country fork of the Next.js codebase; one repo serves every market
Open source license and ownership
The Next.js storefront and the Spree Commerce backend are both open source. Teams can use them commercially, modify the code, and keep private forks. Teams building on Spree Commerce own the code they ship, with no SaaS transaction fees, no platform lock-in, and no surprise pricing changes.
Teams that want dedicated support, SLAs, or deployment on managed infrastructure can layer the Spree Commerce Enterprise Edition on top. EE is optional.
The open source stack alone is a complete commerce system that teams like Maisonette run in production with 65,000+ SKUs.
Teams shipping Next.js storefronts on Spree Commerce
Brands ship Next.js storefronts on Spree Commerce across many different industries such as DTC, B2B, multi-vendor marketplaces.
Here are some example industry deep dives by industry and use case:
- 9 Amazing Next.js Fashion eCommerce Websites From Nike to Depop
- 14 Amazing Next.js Marketplace Websites From DoorDash to StockX
- 7 Real-World Next.js B2B eCommerce Websites From Staples to HashiCorp
- 15 Amazing eCommerce Websites Built with Next.js
- How Maisonette Built a Multi-Vendor Childrenswear Marketplace on Spree Commerce
Frequently asked questions
What is Next.js Commerce?
Next.js Commerce is a category of open source eCommerce starters built on the Next.js React framework. Vercel launched the original Next.js Commerce in 2020 as a reference implementation, and it is no longer actively developed as a general purpose commerce storefront. Spree Commerce ships a production-ready Next.js commerce storefront.
Is Next.js Commerce open source?
Yes. Next.js Commerce projects built on the Next.js framework are open source, and licenses vary by project. Spree Commerce’s Next.js storefront is open source and hosted at github.com/spree/storefront.
What replaces Vercel’s Next.js Commerce in 2026?
Vercel’s original Next.js Commerce repository now targets Shopify as its backend and is no longer actively maintained as a general purpose starter. Spree Commerce ships a production-ready Next.js storefront that fills that gap. It includes a one-page checkout with swappable payment providers, Markets for cross-border commerce, and the @spree/sdk and @spree/next packages.
Is there a free Next.js ecommerce template with a production-ready checkout?
Yes. Spree Commerce’s open source Next.js storefront ships with a one-page checkout backed by the Payment Sessions API. Stripe is the default provider, with Apple Pay, Google Pay, Klarna, Affirm, and SEPA Direct Debit wired out of the box. Teams swap providers on the Spree Commerce backend; the storefront keeps working.
Can a Next.js storefront handle cross-border ecommerce?
Yes. Spree Commerce’s Next.js storefront handles cross-border ecommerce through Markets, a backend feature that configures per-country pricing, tax rules, currencies, and fulfillment. The storefront exposes this through URL routing such as /us/en/products, /de/de/products, or /fr/fr/products. One codebase serves every market against a single Spree Commerce backend.
How do you run a Next.js ecommerce storefront locally?
Clone the Spree Commerce storefront repository, install dependencies with pnpm, and start the dev server. Spree Commerce’s open source Next.js storefront connects to a public demo backend by default. Swap the NEXT_PUBLIC_SPREE_API_URL variable in .env.local to point at a local Spree Commerce backend, and the same storefront renders a local catalog, cart, and checkout.
Get started
Clone the storefront repo and run a local store in under five minutes. For teams evaluating Spree Commerce for enterprise deployment, book a meeting.