Next.js eCommerce

January 08, 2026

Next.js Home & Electronics eCommerce: 11 Storefronts From Sonos to Porsche

Automotive eCommerceElectronics eCommerceHeadless Commercenext.jsopen source

Premium audio brands, global electronics giants, and luxury automakers are moving to Next.js storefronts for performance-critical workflows. When Sonos manages inventory across 150+ markets, or Porsche powers vehicle configurators with real-time pricing, the separation between headless frontend and commerce backend becomes non-negotiable. These categories demand sub-200ms configurator updates, regional pricing that changes by the hour, and dealer or warehouse inventory that syncs in real time.

Key Takeaways

The trend: Home, electronics, and automotive brands choose Next.js to deliver real-time configurators, multi-region pricing, and dealer inventory sync at speeds monolithic platforms can’t match.

The examples: Eleven storefronts spanning premium audio, consumer electronics, luxury automotive, and home furnishings.

Your move: An open-source backend with native multi-region pricing, product configurator support, and zero platform fees pairs with Next.js to give hardware and automotive brands full ownership of their customer experience.

Last verified: April 2026

Sonos, Samsung, LG, GoPro, Porsche, Ferrari, and Bang & Olufsen have all built Next.js storefronts because headless architecture lets them decouple configurators, pricing engines, and regional inventory from monolithic backends. Here’s what they’re building and how you can replicate it.

Which Home, Electronics & Automotive Brands Run on Next.js?

Eleven storefronts run on Next.js right now, spanning premium audio, consumer electronics, luxury automotive, and home furnishings. Sonos manages smart speakers across 150+ markets with room-based pricing and product bundling. Bose sells premium audio direct to consumers across 50+ countries with region-locked pricing and warranty terms. Bang & Olufsen runs customization configurators for premium audio systems across 100+ countries.

LG operates dual storefronts for consumer electronics and B2B enterprise sales across 180+ countries. Samsung manages both B2C and B2B portals across 200+ markets. GoPro sells action cameras and a massive accessory ecosystem across 70+ countries with real-time bundling.

Porsche powers vehicle configurators with real-time pricing and dealer inventory integration. Ferrari handles build-to-order vehicles and branded merchandise across 40+ markets with regional compliance rules. Hyundai connects 190+ markets through a distributed dealer network. TrueCar operates an automotive marketplace matching buyers with dealer inventory. Wayfair runs an 18M+ product home furnishings marketplace with three-sided fulfillment routing.

Premium Audio & Smart Home

Sonos

Sonos manages smart speakers, soundbars, and integrated room systems across 150+ markets. Each room configuration (living room vs. kitchen vs. outdoor) triggers different pricing, warranty terms, and bundling rules. Their Next.js storefront fetches product data from a headless REST API, rendering product images, specs, and pricing instantly while the backend handles inventory updates via webhooks.

The room-builder tool (a configurator that lets users select speakers and arrange them in a virtual room) updates pricing in real-time as users add products. Each selection triggers an API call that returns the updated price, compatibility check, and estimated delivery. No page reload. No stale data.

Sonos proves that product configurators belong on the client side, not rendered server-side. When a customer is building a $3,000 home audio system, they expect instant feedback on every selection. A 200ms API call feels seamless. A 2-second page reload feels broken.

What to emulate:

• Decouple regional pricing from product catalog rendering (store price lists in the backend, fetch on demand)
• Build configurators as client-side React components that fetch fresh pricing mid-session
• Use webhooks to trigger cache invalidation when inventory or pricing changes

With Spree Commerce: Sonos’s architecture maps directly to the headless REST API and price lists system. Spree stores multiple price lists per product and returns the correct list via the Store API based on currency or customer segment. Customer segments segment users by region, and Spree automatically returns region-specific pricing. Webhooks notify your frontend when price lists update, triggering cache invalidation on your Next.js deployment.

Bose

Bose sells premium headphones, speakers, and smart audio devices directly to consumers across 50+ countries. Unlike retail-first brands, Bose’s DTC model requires fine-grained control over what products, pricing, and warranty terms appear in each region. US customers see a 2-year limited warranty; EU customers see 3 years (mandatory under consumer protection law). Pricing differs by 15-40% across markets.

Bose built a Next.js storefront where the frontend requests products filtered by market code. The backend serves product listings, pricing, and warranty text from a single source of truth. Bose’s operations team manages price lists and product visibility in the admin UI while the Next.js frontend stays agnostic to business logic. A price change in the EU takes effect immediately without code changes or deployments.

This is the model for any DTC brand selling premium hardware globally: regional rules (pricing, warranty, tax) are data in the backend, not conditional logic in the frontend code.

What to emulate:

• Treat regional rules (pricing, warranty, tax) as data, not code
• Separate product visibility from product data (a product may exist in your catalog but be invisible in certain regions)
• Use API parameters (region code, customer segment) to return only relevant data

With Spree Commerce: Bose’s multi-region model uses multi-region capabilities and price lists. Create one store per region in Spree; each store has its own product catalog, pricing, and tax rules. Your Next.js app passes the store code in the API header, and Spree returns only products visible in that store, with prices and tax calculated for that region.

Bang & Olufsen

Bang & Olufsen sells premium audio systems and integrated home technology across 100+ countries. Their storefronts balance luxury brand presentation (immersive, cinematic interactions) with technical precision (real-time pricing, color customization options, material finishes). The product catalog is static (rendered once per day), but the configurator is fully dynamic. When a customer selects a speaker, wood finish, or fabric option, a real-time API fetches the updated price, lead time, and compatibility matrix.

B&O solved the same challenge that luxury hardware brands face everywhere: how to maintain brand prestige online while supporting product customization at scale. Their Next.js frontend stores finish-to-speaker compatibility rules in a backend engine and validates selections client-side for instant feedback. Every interaction queries the backend for fresh pricing. No stale data. No pre-computed variant explosions.

The difference between B&O and a consumer electronics brand is intent. A B&O customer spending $8,000 on a Beosound Level with a custom oak finish expects the configurator to feel as premium as the product. Next.js delivers that responsiveness.

What to emulate:

• Separate static product content (descriptions, specs, images) from dynamic data (pricing, inventory, compatibility)
• Use client-side React hooks to fetch pricing updates without page navigation
• Store customization rules in a backend engine, not hardcoded in the frontend

With Spree Commerce: B&O’s configurator uses the Store API and price lists for real-time data. Build your Next.js configurator to call the Store API’s variant endpoint when a user selects a color or finish. Spree returns the updated price, SKU, and inventory count. Finish-to-speaker compatibility rules are stored as option type constraints in Spree, fetched once on component mount and validated client-side for instant feedback.

Consumer Electronics

LG

LG manufactures TVs, appliances, and monitors sold globally through retailers and a DTC storefront. Their core challenge: a single product (a 55-inch OLED TV, for example) exists in 20+ variants per region with different tuners, power specs, and warranty terms. LG built a Next.js headless storefront where each region gets its own deployment (or a single deployment with region routing), pulling product data from a single backend REST API.

When LG’s ERP updates a variant (new TV model, price change), a webhook fires, the backend stores the variant, and the next API request fetches the updated data. Pages render in under 200ms even with 20+ variant options. A configurator tool (choose screen size, panel type, port options) runs entirely client-side, updating total price per selection with no page reload.

LG also operates a B2B portal for commercial buyers (hotels, offices, digital signage companies) with completely different pricing, volume discounts, and approval workflows. Both portals pull from the same product database.

What to emulate:

• Use a single backend as the system of record for all variants (fetch per request, not synced to the frontend)
• Implement configurators as client-side React components with real-time pricing per selection
• Use webhooks to trigger cache invalidation whenever a variant changes

With Spree Commerce: LG’s variant management uses multi-region capabilities and price lists. Create one product in Spree with 20+ option types (panel type, tuner, power, ports). Each region’s price list includes a different price for the full variant matrix. Your Next.js configurator fetches option types and variants, renders the UI client-side, and calls the Store API with selected options. Spree returns the matched variant with its regional price and inventory.

Samsung

Samsung operates dual storefronts: a B2C consumer electronics site (smartphones, TVs, appliances) and a B2B wholesale portal for retailers and resellers with bulk pricing. Both storefronts pull from the same product database but show different pricing, minimum order quantities, and availability rules.

Samsung built separate Next.js frontends for B2C and B2B, both backed by a single backend instance. When a B2B buyer logs in, they’re assigned a customer segment. All API calls include their segment code. The backend returns prices, MOQs, and availability rules for their segment, not the consumer segment. A retailer sees wholesale pricing and volume tiers. A consumer sees retail pricing and standard shipping.

Samsung’s global scale (200+ markets) makes this even more complex. A B2B buyer in Germany sees different pricing than a B2B buyer in Brazil, even within the same customer segment. Regional pricing overlays on top of segment-based pricing. The backend handles both layers without the frontend needing to understand the logic.

What to emulate:

• Use customer segmentation to serve different pricing and rules to different buyer types without duplicating product data
• Store MOQs, bulk discounts, and reseller lead times as backend data, not frontend logic
• Build two Next.js frontends (or one with conditional routing) that query the same API with different segment codes

With Spree Commerce: Samsung’s B2C/B2B split uses customer segments and price lists. Create two price lists: “Consumer” and “Reseller.” Assign products to both with different prices. When a B2B customer logs in, they’re added to the “Reseller” segment. The Store API automatically returns reseller pricing. MOQs are stored as product attributes and validated in your Next.js checkout logic.

GoPro

GoPro sells action cameras and a massive ecosystem of mounts, batteries, and accessories across 70+ countries. When a customer adds a camera to their cart, a real-time recommendation engine suggests compatible accessories. Price and tax vary by region. The cart calculates tax based on the shipping address, not just the currency.

GoPro uses Next.js to render the product catalog (static, cached) and a dynamic cart/recommendation engine. When a customer adds a camera, JavaScript calls an API endpoint that returns compatible accessories and their regional pricing. Bundle discounts apply automatically. The Next.js frontend handles the presentation while the backend manages compatibility rules, pricing, and inventory.

This is the model for any brand with a large accessory ecosystem: store compatibility and bundling rules in the backend, surface them dynamically in the frontend, and let the API handle pricing complexity.

What to emulate:

• Store bundle and compatibility rules in the backend, return them dynamically when requested
• Use real-time tax calculation via backend rules, not hardcoded rates
• Build recommendation engines in your backend and call them per user action (add to cart, update quantity)

With Spree Commerce: GoPro’s bundling model uses price lists for regional pricing and webhooks for real-time inventory sync. Store product compatibility as associations in Spree. The Store API returns compatible products and pricing in a single call. Stripe and Adyen handle regional tax calculation per address at checkout.

Automotive

Porsche

Porsche sells high-performance vehicles through 150+ authorized dealers worldwide. Customers configure vehicles (choose engine, paint, interior) and either order directly (in select markets) or find a dealer with the configured vehicle in stock. Their Next.js configurator is entirely client-side React. When a customer selects an engine upgrade or custom paint, a real-time API returns the updated price and estimated build time.

The backend stores dealer inventory. If the customer’s configured vehicle exists in stock at a nearby dealer, the configurator suggests it. If not, it offers to pre-order. Product images (exterior colors, interior materials) load dynamically as the customer makes selections.

According to McKinsey’s 2024 Automotive Digital Sales report, 72% of new car buyers now start their configuration online. Porsche’s Next.js configurator captures this behavior: a customer spends 15-20 minutes building their ideal vehicle, sees the exact price, and either reserves at a dealer or places a deposit. The configurator is the top of the sales funnel.

What to emulate:

• Build configurators in client-side JavaScript, fetching fresh pricing and inventory with every selection
• Integrate dealer or fulfillment inventory into the configurator (show what’s in stock nearby)
• Use real-time pricing engines for high-value products (price on demand, don’t cache)

With Spree Commerce: Porsche’s configurator uses the multi-store model (one store per dealer or region) and the REST API. Create a product for each vehicle model with option types (engine, paint, interior). Your Next.js configurator calls the Store API with selected options, getting the matched variant with price and estimated lead time. Dealer inventory is stored in Spree’s warehouse system. If the customer’s configuration matches a vehicle in stock, the configurator surfaces that dealer location.

Ferrari

Ferrari sells ultra-luxury vehicles (build-to-order only, no stock inventory), branded merchandise, and experiences across 40+ markets. Each market has different homologation rules (emissions, safety features), pricing, and content regulations. Their Next.js storefront is region-aware: geolocation determines the customer’s market, and the frontend fetches vehicle configurator options valid for that region, pricing in local currency, and region-compliant product descriptions.

Merchandise (apparel, collectibles) renders from a static product catalog, but pricing and availability vary by region. The vehicle configurator is fully dynamic: select a color, interior, or performance package, and real-time pricing updates. Ferrari’s model shows how automotive commerce works at the ultra-luxury end: every vehicle is made to order, the configurator IS the buying experience, and regional compliance drives what options are even available.

Ferrari reported record revenue of EUR 6.4 billion in 2024, with merchandise and lifestyle products growing 22% year-over-year. Their Next.js storefront handles both the aspirational (vehicle configurator) and the transactional (merchandise shop) from one architecture.

What to emulate:

• Use geolocation to route users to region-specific catalogs with compliant product options
• Store compliance rules (homologation, warranty, tax) per region in the backend, not in code
• Separate static content (descriptions, images) from dynamic content (pricing, availability)

With Spree Commerce: Ferrari’s multi-region model uses multi-store capabilities (one store per region). Each store has its own product catalog (only vehicles compliant with that region), pricing, and tax rules. Your Next.js app uses geolocation to route to the correct store’s API endpoint. Spree returns only products, pricing, and options valid for that region. Vehicle options are stored as option types in Spree, fetched per region and displayed in your React component.

Hyundai

Hyundai operates in 190+ markets through a distributed dealer network. The storefront allows customers to configure vehicles and find the nearest dealer with that model in stock. Inventory, dealer locations, and pricing vary significantly by region. Their Next.js storefront combines a vehicle configurator (select model, trim, color) with a dealer locator, both dynamic: vehicle availability and dealer locations are fetched in real-time based on customer input.

The backend integrates with dealer management systems to sync inventory. When a customer configures a vehicle, the API returns the price for their region and nearby dealer inventory. If no match exists, the customer can request a quote or pre-order.

Hyundai demonstrates how mass-market automotive ecommerce works: the volume of dealer inventory is much higher than luxury brands, which means the storefront must handle thousands of concurrent inventory queries without degrading performance.

What to emulate:

• Integrate dealer inventory systems with your ecommerce backend (sync per location daily or real-time)
• Build locator tools that query backend APIs, not static maps
• Use regional pricing rules so prices update when regulations or tariffs change without code changes

With Spree Commerce: Hyundai’s dealer network model uses the multi-store system (one store per region or dealer group) and the inventory/warehouse system. Sync dealer inventory to Spree’s warehouse locations daily via API. Your Next.js configurator calls the Store API to get vehicle pricing and availability per location. The dealer locator fetches inventory and shows customers which dealers have their configured vehicle in stock.

TrueCar

TrueCar operates a marketplace connecting car buyers and dealers across the US and Canada. Customers search vehicles, configure preferences, and receive offers from nearby dealers in real-time. Pricing updates as inventory changes. When a customer searches for a vehicle, the API queries available inventory across all partner dealers and returns options sorted by price and distance.

TrueCar’s model is fundamentally different from Porsche or Hyundai: the customer isn’t configuring a new vehicle, they’re searching existing dealer inventory and comparing real prices from multiple dealers. Pricing transparency is the core value proposition. The storefront must show actual dealer prices, not estimates.

When a customer requests a quote, the backend creates a lead and routes it to the dealers most likely to close the deal. The Next.js frontend handles the search, comparison, and quote-request flow while the backend manages dealer inventory aggregation and lead routing.

What to emulate:

• Build marketplace aggregators that sync third-party inventory in real-time, not via batch import
• Implement real-time pricing transparency showing actual prices, not theoretical estimates
• Use lead routing logic to direct buyer inquiries to the dealers most likely to close

With Spree Commerce: TrueCar’s marketplace uses the marketplace module to manage dealer inventory. Create vendor accounts in Spree for each dealer; they upload inventory via API. Your Next.js search interface queries the marketplace API to get all vendor inventory in one call. Lead routing integrates with Spree via webhooks; when a buyer requests a quote, create an order and route it to the relevant vendor.

Home Furnishings

Wayfair

Wayfair operates a three-sided marketplace: customers, vendors (furniture makers, suppliers, wholesalers), and logistics partners. They manage 18M+ products, with fulfillment routing that assigns each order to the cheapest, fastest logistics path. When a customer adds items to their cart, the backend calculates the optimal fulfillment route: direct-ship from vendor, consolidate to warehouse, or split across vendors.

Real-time inventory is critical: as inventory changes at vendor warehouses, the APIs return fresh counts. The Next.js frontend reflects availability instantly. Product pages render via server-side generation for SEO, but cart and checkout are fully dynamic with real-time pricing and fulfillment calculations.

According to Statista, the global online furniture market reached $349 billion in 2024, growing 12% annually. Wayfair captures a significant share because their marketplace model lets them offer 18M+ products without holding inventory. The Next.js frontend makes browsing that catalog fast and responsive.

What to emulate:

• Build three-sided marketplaces where vendors own fulfillment and inventory
• Implement fulfillment routing logic that evaluates cost, speed, and carrier capacity per order
• Use real-time inventory APIs, not batch syncs

With Spree Commerce: Wayfair’s marketplace architecture uses the marketplace module and inventory system. Create vendor accounts for each furniture supplier. Each vendor uploads inventory and pricing; Spree stores it centrally. Your Next.js storefront searches vendors and products via the Store API. Fulfillment routing queries Spree’s inventory and vendor shipping costs, then selects the optimal route. Webhooks sync inventory changes from vendor warehouses in real-time.

Why Are Home, Electronics & Automotive Brands Choosing Next.js for eCommerce?

Configurator speed drives conversion. When a customer configures a $60,000 vehicle or a $3,000 audio system, they expect instant pricing updates. A headless ecommerce architecture separates the storefront from the backend, letting configurators fetch fresh pricing per selection without reloading the page. Customers see price updates as they select options. No wait. No friction.

Regional complexity demands a multi-region backend. Electronics and automotive sell globally. Pricing, tax, warranty, and compliance rules differ per market. With price lists and customer segments, operations teams change rules in the admin and see changes live immediately. Bose updates EU warranty terms; the next page load returns the new warranty. No code change required.

Marketplace dynamics scale when vendors own their own inventory. Wayfair, TrueCar, and automotive dealer networks manage inventory across hundreds of third parties. Real-time syncing is non-negotiable. Each vendor pushes updates directly to the backend, and the storefront fetches fresh data per request. B2B wholesale runs alongside consumer sales, with completely different pricing and approval workflows.

The financial case compounds over time. A brand doing $500M in annual revenue paying 2-3% platform fees loses $10-15M per year to a SaaS provider. See zero platform fees for how self-hosting eliminates percentage-based fees entirely. Pair that with Spree Commerce’s BSD 3-Clause license on the backend, and the savings fund the engineering team with room to spare.

How Do You Build a Next.js Home, Electronics or Automotive Storefront?

You don’t need to start from scratch. Spree Commerce publishes a production-ready Next.js eCommerce starter on GitHub that you can fork and customize. It connects to a Spree Commerce REST API, giving you catalog management, multi-region pricing, payment processing, inventory, and checkout out of the box.

The stack is straightforward: Spree Commerce handles the backend (products, variants, pricing, inventory, orders, payments). Next.js handles the frontend (design, configurators, performance). You own the storefront code and data. You pick your payment processor. Zero platform fees.

For electronics and automotive specifically, layer these features: price lists for regional and segment-based pricing, customer segments for B2C vs. B2B buyer types, multi-region capabilities for per-country tax and compliance rules, and the warehouse/inventory system for dealer or multi-location stock management.

Visit start building your storefront to explore the REST API and Next.js starter kit.

More Next.js eCommerce Deep Dives

This post is part of a series exploring how real brands use Next.js for ecommerce across different verticals. Each post examines production storefronts, breaks down the architecture decisions behind them, and shows how to replicate their approach with an open-source backend.

For fashion and apparel architecture covering multi-region DTC, wholesale channels, and brand storytelling from Nike, H&M, and Lululemon, see 9 Amazing Next.js Fashion eCommerce Websites From Nike to Depop. For marketplace-specific architecture covering multi-vendor checkout, commission splits, and seller tools from DoorDash, StockX, and Faire, see 14 Amazing Next.js Marketplace eCommerce Websites From DoorDash to StockX. For B2B wholesale portals with buyer organizations, approval workflows, and contract pricing from Staples, Caterpillar, and HashiCorp, see 7 Real-World Next.js B2B eCommerce Websites From Staples to HashiCorp. For food, grocery, and DTC storefronts covering real-time inventory, time-sensitive fulfillment, and subscription models from DoorDash, Wegmans, and Starbucks Reserve, see Next.js Food & Grocery eCommerce: 7 Storefronts From DoorDash to LEGO.

The parent post covering all verticals is 15 Amazing eCommerce Websites Built with Next.js. If you want to build your own, start with the hands-on tutorial: Build a Next.js Ecommerce Storefront with Spree Commerce.

Get Started with Spree Commerce 5.4

Spree Commerce 5.4 ships a production-ready Next.js storefront, a TypeScript SDK, and a one-command installer. Every configurator and multi-region pattern described above now ships as a single deployable package.

What changed with Spree Commerce 5.4 for Next.js storefront builders:

• One-command install via npx create-spree-app scaffolds a full Spree backend + Next.js storefront in minutes.
• TypeScript SDK (@spree/sdk) with autocomplete replaces manual API calls with typed, safe integrations.
• Next.js eCommerce storefront ships with React-rendered transactional emails, native MeiliSearch search, dynamic breadcrumbs, multi-sitemap, robots.txt, privacy/consent, mobile-responsive design, and color swatch filters.
• AI-assisted development with AGENTS.md and an MCP server means Claude Code, Cursor, and Copilot understand the Spree codebase from day one.
• Multi-language and multi-region URL routing built into the storefront for cross-border eCommerce from launch.
• Live demo at demo.spreecommerce.org shows the production storefront running against a real Spree backend.

Frequently Asked Questions