Next.js Ecommerce: Build a Store Without a Platform

Next.js has become the default framework for modern web applications — and ecommerce is no exception. Instead of being locked into Shopify, BigCommerce, or any single platform, developers are building Next.js ecommerce stores connected to headless backends. The result is full control over performance, design, and deployment, without giving up the commerce features your store actually needs.

This guide covers the landscape of building ecommerce with Next.js: which backends work, what the App Router changes, where the hard parts are, and how to get to production without rebuilding everything from scratch.

Why developers are choosing framework-first over platform-first

There are two ways to start an ecommerce project. The traditional approach is platform-first: pick Shopify or WooCommerce, then build within the constraints of that platform's templating system, theme engine, and hosting model. The alternative is framework-first: pick Next.js as your frontend, then connect whatever commerce backend fits your needs.

Framework-first gives you full control over the user experience, performance characteristics, and deployment strategy. You're not limited to Liquid templates or PHP theme files. You're writing React components, using TypeScript, and deploying to edge networks. The commerce backend becomes a data source — not the thing that dictates how your store looks and behaves.

This approach is particularly attractive to teams that already build with React and Next.js. Rather than learning a platform-specific stack, they can use the same tools, patterns, and deployment pipelines they already know.

The Next.js ecommerce landscape

Next.js doesn't include commerce features out of the box. You need a backend to handle products, inventory, pricing, orders, and payments. The choice of backend shapes everything from developer experience to long-term costs. Here are the main options.

WooCommerce as backend (REST API or WPGraphQL)

WooCommerce powers a massive share of online stores and has the largest ecommerce plugin ecosystem available. Using it as a headless backend means you keep WordPress for content management and the full WooCommerce extension library, while serving your storefront through Next.js.

The WooCommerce REST API provides endpoints for products, orders, cart operations, customers, and more. For more efficient data fetching, WPGraphQL with WooCommerce lets you query exactly the fields you need in a single request — no over-fetching, no waterfall requests.

If you're going the REST API route, our guide on connecting the WooCommerce REST API to Next.js covers authentication, product fetching, and order creation step by step.

Medusa as backend

Medusa is an open-source commerce platform built with Node.js and TypeScript. It was designed for headless from day one, so there's no legacy monolithic frontend to work around. The developer experience is strong — you get a well-documented API, a plugin system, and TypeScript types throughout.

The trade-off is ecosystem size. WooCommerce has thousands of extensions for shipping, tax, marketing, and fulfilment. Medusa's plugin library is growing but significantly smaller. If your store needs complex tax rules, multi-currency support, or niche shipping integrations, you may end up building those yourself.

Saleor as backend

Saleor is a GraphQL-first commerce platform built on Python and Django. It targets enterprise use cases with features like multi-warehouse inventory, channel-based pricing, and granular permissions. The GraphQL API is comprehensive and well-structured.

The downside is complexity. Self-hosting Saleor requires managing a Python/Django application with PostgreSQL and Redis. The learning curve is steeper than WooCommerce or Medusa, and the community is smaller. Saleor Cloud offers a managed option, but at enterprise pricing.

Commerce.js and Snipcart

Commerce.js and Snipcart are API-only commerce backends. You don't host anything — you call their APIs for product data, cart management, and checkout. They're the simplest options to integrate with Next.js, often requiring just a few API calls to get a basic store running.

The trade-offs are less control and ongoing SaaS fees. You're dependent on their API availability, rate limits, and pricing changes. For small stores or MVPs, that's often fine. For stores doing serious volume, the per-transaction fees add up quickly.

Building with the Next.js App Router

The Next.js App Router — introduced in Next.js 13 and now the default — changes how ecommerce applications are structured. React Server Components are the biggest shift: product pages can fetch data entirely on the server and ship zero JavaScript to the browser for product display. Only interactive elements like the add-to-cart button or variant selector need client-side JavaScript.

This separation maps naturally to ecommerce. Product data (title, description, images, price) is read-only content — perfect for Server Components. Cart interactions, wishlist toggles, and quantity selectors are stateful and interactive — those become Client Components. Route handlers replace API routes for proxying requests to your commerce backend.

Incremental Static Regeneration (ISR) handles the product update problem. You can statically generate product pages at build time for maximum performance, then revalidate them on a schedule or via webhooks when product data changes. No full rebuild required.

The hard parts nobody talks about

Tutorials make headless ecommerce look straightforward: fetch products, render them, done. In reality, the difficult parts are the stateful interactions that every real store needs. Here's what actually takes the most time.

Cart session persistence

Your Next.js frontend is stateless by default. Every page load is a fresh request. But a shopping cart is inherently stateful — customers expect items to persist across pages, browser tabs, and even sessions. Solving this requires choosing between cookie-based sessions, JWT tokens, or server-side cart storage via your backend's API.

Each approach has trade-offs around security, performance, and complexity. Cookie-based sessions are simple but limited in size. JWT tokens work well but need careful expiry handling. Server-side carts via WooCommerce's cart API are the most robust but add latency. Our guide on headless WooCommerce cart sessions walks through each approach in detail.

Checkout and payment integration

Checkout is where most headless ecommerce projects hit real friction. You need to coordinate the frontend form, address validation, shipping rate calculation, tax computation, payment processing, and order creation — all across two separate systems (your Next.js frontend and your commerce backend).

Stripe Checkout offers the simplest path: redirect customers to a hosted payment page, then handle webhooks for order confirmation. Stripe Elements gives you more design control but more integration work. Either way, the flow between frontend order creation and backend payment verification requires careful implementation. See our headless WooCommerce Stripe checkout guide for the full walkthrough.

Real-time inventory and pricing

When your product data is statically generated, it can go stale between builds. A product might show as in stock on the cached page when it's actually sold out. Prices might change in WooCommerce but not reflect on the frontend for hours.

The solution is a combination of ISR revalidation, webhooks that trigger rebuilds on inventory changes, and client-side validation at checkout time. Webhooks are particularly important — they let your backend push updates to your frontend rather than relying on polling. Our guide on WooCommerce webhooks with Next.js covers the setup.

Deployment options

One of the biggest advantages of building with Next.js is deployment flexibility. You're not tied to a specific hosting provider or infrastructure model.

Vercel is the native platform for Next.js. You get automatic edge function deployment, preview deployments for every pull request, built-in analytics, and zero-configuration ISR. It's the path of least resistance for most Next.js ecommerce projects.

Netlify offers a strong alternative with serverless functions, branch deploys, and good Next.js support. If your team already uses Netlify for other projects, it's a natural fit.

Cloudflare Pages takes an edge-first approach with Workers integration. It's excellent for global performance but requires more configuration for Next.js features like ISR and middleware.

Self-hosted gives you the most control. Run Next.js as a Node.js server in Docker, on your own infrastructure. You manage scaling, caching, and deployment pipelines yourself — but you're not paying platform fees or dealing with vendor-specific limitations. Our guide on WooCommerce edge caching covers CDN and caching strategies for any deployment model.

What starter kits save you

Building a Next.js ecommerce store from scratch means solving every problem described above: product pages, cart persistence, checkout flow, payment integration, SEO setup, and deployment configuration. For a senior developer, that's typically three to six months of focused work before the store is production-ready.

A good starter kit provides all of this out of the box, letting you focus on customisation rather than plumbing. Instead of months of foundational work, you're days or weeks from a production deployment.

WPBundle provides exactly this for the WooCommerce + Next.js stack. Pre-built pages, cart sessions, Stripe checkout, SEO configuration, and deployment setup — so you can skip the hard parts and ship your store.

The bottom line

Next.js ecommerce is production-ready. The framework provides the rendering strategies, the deployment infrastructure exists, and the headless backend options are mature. The question isn't whether you can build a store with Next.js — it's whether you want to solve the integration challenges yourself or start from a proven foundation.

For developers already working with React and Next.js, the framework-first approach makes sense. You get better performance, full design control, and a modern development experience. The key is choosing the right backend for your needs and not underestimating the work involved in cart sessions, checkout, and payment integration.

If you're evaluating your options, these guides cover the specifics: self-hosted ecommerce, why developers are leaving Shopify, migrating WooCommerce to headless, and what headless WooCommerce actually is.