{"id":11119,"date":"2024-08-20T12:27:56","date_gmt":"2024-08-20T12:27:56","guid":{"rendered":"https:\/\/spreecommerce.org\/?post_type=cpt_integrations&#038;p=11119"},"modified":"2026-04-17T18:33:46","modified_gmt":"2026-04-17T18:33:46","slug":"nextjs-ecommerce-storefront","status":"publish","type":"cpt_integrations","link":"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/","title":{"rendered":"Next.js eCommerce Storefront"},"content":{"rendered":"\n<p>An open source, production-ready <strong>Next.js eCommerce storefront<\/strong> from <strong><a href=\"https:\/\/spreecommerce.org\/\">Spree Commerce<\/a><\/strong>. Next.js 16, React 19, TypeScript, Tailwind CSS 4, <strong><a href=\"https:\/\/www.npmjs.com\/package\/@spree\/sdk\">@spree\/sdk<\/a><\/strong>, and swappable payment providers. Open source, free to fork, ready to deploy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What ships with the Spree Commerce Next.js storefront<\/h2>\n\n\n\n<p>Spree Commerce&#8217;s open source <strong>Next.js eCommerce storefront<\/strong> 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.<\/p>\n\n\n\n<p>The stack is modern and opinionated: <strong>Next.js 16<\/strong> with the App Router and Server Actions, <strong>React 19<\/strong>, <strong>TypeScript<\/strong>, <strong>Tailwind CSS 4<\/strong>, <strong><a href=\"https:\/\/www.npmjs.com\/package\/@spree\/sdk\">@spree\/sdk<\/a><\/strong>, and <strong><a href=\"https:\/\/www.npmjs.com\/package\/@spree\/next\">@spree\/next<\/a><\/strong> for typed Spree Commerce API calls with httpOnly cookies on the server side. The storefront talks to the Spree Commerce backend over the <strong><a href=\"https:\/\/spreecommerce.org\/docs\/api-reference\/store-api\/introduction\">Spree Commerce Storefront API<\/a><\/strong>.<\/p>\n\n\n\n<p>What ships in the box:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Product catalog with category, search, and filters<\/li>\n\n\n\n<li>Product detail pages with variants, images, and inventory<\/li>\n\n\n\n<li>Cart and one-page checkout \n<ul class=\"wp-block-list\">\n<li>and Stripe as the default payment provider, <\/li>\n\n\n\n<li>with Apple Pay and Google Pay for quick checkout<\/li>\n\n\n\n<li>Klarna, Affirm, and SEPA Direct Debit wired alongside Stripe<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Customer account with order history, addresses, and saved payment methods<\/li>\n\n\n\n<li>Analytics and SEO prewired: GTM, GA4, JSON-LD, Sentry error reporting<\/li>\n\n\n\n<li>Server-side rendering for every page, clean SEO indexability out of the box<\/li>\n<\/ul>\n\n\n\n<p>Easily replace Stripe with another payment provider using <strong><a href=\"https:\/\/spreecommerce.org\/docs\/developer\/core-concepts\/payments\">Payment Sessions<\/a><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"900\" src=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-1024x900.webp\" alt=\"Spree Commerce Next.js Storefront - Homepage\" class=\"wp-image-36765\" srcset=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-1024x900.webp 1024w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-300x264.webp 300w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-768x675.webp 768w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-1536x1350.webp 1536w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-Homepage-2048x1800.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why we built our own open source Next.js commerce storefront<\/h2>\n\n\n\n<p>Vercel&#8217;s Next.js Commerce project was the canonical Next.js starter for ecommerce from 2020 through 2024. It&#8217;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.<\/p>\n\n\n\n<p>Spree Commerce closed that gap. The <strong><a href=\"https:\/\/spreecommerce.org\/announcing-spree-commerce-5-4\/\">open source Next.js storefront release<\/a><\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"909\" src=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse-1024x909.webp\" alt=\"\" class=\"wp-image-36767\" srcset=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse-1024x909.webp 1024w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse-300x266.webp 300w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse-768x682.webp 768w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse-1536x1364.webp 1536w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2026\/04\/Spree-Commerce-Next.js-Storefront-PageSpeed-Lighthouse.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js as the head on a headless eCommerce platform<\/h2>\n\n\n\n<p>Spree Commerce is a <strong><a href=\"https:\/\/spreecommerce.org\/headless-ecommerce\/\">headless eCommerce platform<\/a><\/strong> with a complete <strong><a href=\"https:\/\/spreecommerce.org\/docs\/api-reference\/platform\/authentication\">REST API<\/a><\/strong> 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.<\/p>\n\n\n\n<p>For teams evaluating composable and headless commerce, this answers the usual objection: <strong><a href=\"https:\/\/spreecommerce.org\/headless-ecommerce\/\">headless commerce platforms<\/a><\/strong> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cross-border storefront with Markets<\/h2>\n\n\n\n<p>Multi-region operators need local pricing, taxes, languages, and fulfillment rules without forking the storefront per country. Spree Commerce&#8217;s <strong><a href=\"https:\/\/spreecommerce.org\/multi-region-ecommerce\/\">Markets<\/a><\/strong> feature handles that server-side, and the Next.js storefront picks it up through URL routing.<\/p>\n\n\n\n<p>What each market carries on the same codebase:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Its own currency, converted at configurable rates<\/li>\n\n\n\n<li>Its own language, with URL routing like \n<ul class=\"wp-block-list\">\n<li><code>\/us\/en\/products<\/code><\/li>\n\n\n\n<li><code>\/de\/de\/products<\/code><\/li>\n\n\n\n<li><code>\/fr\/fr\/products<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Local pricing rules and tax treatments<\/li>\n\n\n\n<li>Local checkout flows and payment methods<\/li>\n\n\n\n<li>Local fulfillment rules and shipping zones<\/li>\n\n\n\n<li>No per-country fork of the Next.js codebase; one repo serves every market<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Open source license and ownership<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Teams that want dedicated support, SLAs, or deployment on managed infrastructure can layer the <strong><a href=\"https:\/\/spreecommerce.org\/enterprise\/\">Spree Commerce Enterprise Edition<\/a><\/strong> on top. EE is optional.<br><br>The open source stack alone is a complete commerce system that teams like <strong><a href=\"https:\/\/spreecommerce.org\/success-stories\/\">Maisonette<\/a><\/strong> run in production with 65,000+ SKUs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Teams shipping Next.js storefronts on Spree Commerce<\/h2>\n\n\n\n<p>Brands ship Next.js storefronts on Spree Commerce across many different industries such as DTC, B2B, multi-vendor marketplaces. <br><br>Here are some example industry deep dives by industry and use case:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/spreecommerce.org\/nextjs-fashion-ecommerce-storefronts\/\">9 Amazing Next.js Fashion eCommerce Websites From Nike to Depop<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/spreecommerce.org\/nextjs-marketplace-ecommerce-platforms\/\">14 Amazing Next.js Marketplace Websites From DoorDash to StockX<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/spreecommerce.org\/nextjs-b2b-ecommerce-storefronts\/\">7 Real-World Next.js B2B eCommerce Websites From Staples to HashiCorp<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/spreecommerce.org\/15-amazing-ecommerce-websites-built-with-next-js\/\">15 Amazing eCommerce Websites Built with Next.js<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/spreecommerce.org\/maisonette-spree-commerce-nextjs-marketplace\/\">How Maisonette Built a Multi-Vendor Childrenswear Marketplace on Spree Commerce<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<div class=\"wp-block-wpseopress-faq-block-v2 is-layout-flow wp-block-wpseopress-faq-block-v2-is-layout-flow\">\n<details id=\"what-is-next-js-commerce\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What is Next.js Commerce?<\/summary>\n<p>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.<\/p>\n<\/details>\n\n\n\n<details id=\"is-next-js-commerce-open-source\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is Next.js Commerce open source?<\/summary>\n<p>Yes. Next.js Commerce projects built on the Next.js framework are open source, and licenses vary by project. Spree Commerce&#8217;s Next.js storefront is open source and hosted at <a href=\"https:\/\/github.com\/spree\/storefront\">github.com\/spree\/storefront<\/a>.<\/p>\n<\/details>\n\n\n\n<details id=\"what-replaces-vercels-next-js-commerce-in-2026\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What replaces Vercel&#8217;s Next.js Commerce in 2026?<\/summary>\n<p>Vercel&#8217;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.<\/p>\n<\/details>\n\n\n\n<details id=\"is-there-a-free-next-js-ecommerce-template-with-a-production-ready-checkout\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is there a free Next.js ecommerce template with a production-ready checkout?<\/summary>\n<p>Yes. Spree Commerce&#8217;s open source Next.js storefront ships with a one-page checkout backed by the <a href=\"https:\/\/spreecommerce.org\/docs\/developer\/core-concepts\/payments\">Payment Sessions API<\/a>. 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.<\/p>\n<\/details>\n\n\n\n<details id=\"can-a-next-js-storefront-handle-cross-border-ecommerce\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Can a Next.js storefront handle cross-border ecommerce?<\/summary>\n<p>Yes. Spree Commerce&#8217;s Next.js storefront handles cross-border ecommerce through <a href=\"https:\/\/spreecommerce.org\/multi-region-ecommerce\/\">Markets<\/a>, a backend feature that configures per-country pricing, tax rules, currencies, and fulfillment. The storefront exposes this through URL routing such as <code>\/us\/en\/products<\/code>, <code>\/de\/de\/products<\/code>, or <code>\/fr\/fr\/products<\/code>. One codebase serves every market against a single Spree Commerce backend.<\/p>\n<\/details>\n\n\n\n<details id=\"how-do-you-run-a-next-js-ecommerce-storefront-locally\" class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do you run a Next.js ecommerce storefront locally?<\/summary>\n<p>Clone the Spree Commerce storefront repository, install dependencies with pnpm, and start the dev server. Spree Commerce&#8217;s open source Next.js storefront connects to a public demo backend by default. Swap the <code>NEXT_PUBLIC_SPREE_API_URL<\/code> variable in <code>.env.local<\/code> to point at a local Spree Commerce backend, and the same storefront renders a local catalog, cart, and checkout.<\/p>\n<\/details>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/\",\"@id\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/\",\"mainEntity\":[{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#what-is-next-js-commerce\",\"name\":\"What is Next.js Commerce?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>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.&lt;\/p>\"}},{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#is-next-js-commerce-open-source\",\"name\":\"Is Next.js Commerce open source?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>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 &lt;a href=\\\"https:\/\/github.com\/spree\/storefront\\\">github.com\/spree\/storefront&lt;\/a>.&lt;\/p>\"}},{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#what-replaces-vercels-next-js-commerce-in-2026\",\"name\":\"What replaces Vercel's Next.js Commerce in 2026?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>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.&lt;\/p>\"}},{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#is-there-a-free-next-js-ecommerce-template-with-a-production-ready-checkout\",\"name\":\"Is there a free Next.js ecommerce template with a production-ready checkout?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>Yes. Spree Commerce's open source Next.js storefront ships with a one-page checkout backed by the &lt;a href=\\\"https:\/\/spreecommerce.org\/docs\/developer\/core-concepts\/payments\\\">Payment Sessions API&lt;\/a>. 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.&lt;\/p>\"}},{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#can-a-next-js-storefront-handle-cross-border-ecommerce\",\"name\":\"Can a Next.js storefront handle cross-border ecommerce?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>Yes. Spree Commerce's Next.js storefront handles cross-border ecommerce through &lt;a href=\\\"https:\/\/spreecommerce.org\/multi-region-ecommerce\/\\\">Markets&lt;\/a>, a backend feature that configures per-country pricing, tax rules, currencies, and fulfillment. The storefront exposes this through URL routing such as &lt;code>\/us\/en\/products&lt;\/code>, &lt;code>\/de\/de\/products&lt;\/code>, or &lt;code>\/fr\/fr\/products&lt;\/code>. One codebase serves every market against a single Spree Commerce backend.&lt;\/p>\"}},{\"@type\":\"Question\",\"url\":\"https:\/\/spreecommerce.org\/integrations\/nextjs-ecommerce-storefront\/#how-do-you-run-a-next-js-ecommerce-storefront-locally\",\"name\":\"How do you run a Next.js ecommerce storefront locally?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"&lt;p>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 &lt;code>NEXT_PUBLIC_SPREE_API_URL&lt;\/code> variable in &lt;code>.env.local&lt;\/code> to point at a local Spree Commerce backend, and the same storefront renders a local catalog, cart, and checkout.&lt;\/p>\"}}]}<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Get started<\/h2>\n\n\n\n<p>Clone the <strong><a href=\"https:\/\/github.com\/spree\/storefront\">storefront repo<\/a><\/strong> and run a local store in under five minutes. For teams evaluating Spree Commerce for enterprise deployment, <strong><a href=\"https:\/\/spreecommerce.org\/get-started\/\">book a meeting<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s open source Next.js eCommerce storefront is a production-ready starter for teams building headless commerce [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Next.js Commerce Storefront, Open Source | Spree Commerce","_seopress_titles_desc":"Open source Next.js commerce storefront from Spree Commerce. Next.js 16, React 19, TypeScript, MIT license. Swappable payment providers.","_seopress_robots_index":""},"cpt_integrations_category":[989],"class_list":["post-11119","cpt_integrations","type-cpt_integrations","status-publish","hentry","cpt_integrations_category-storefront"],"acf":[],"_links":{"self":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations\/11119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations"}],"about":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/types\/cpt_integrations"}],"wp:attachment":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/media?parent=11119"}],"wp:term":[{"taxonomy":"cpt_integrations_category","embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/cpt_integrations_category?post=11119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}