Open-source Ecommerce

April 20, 2026

Next.js Food & Grocery eCommerce: 7 Storefronts From DoorDash to LEGO

DTCFood eCommerceHeadless Commercenext.jsopen source

Food commerce operates at a pace most ecommerce categories never touch. A grocery order expires in hours. A DTC flower delivery has a two-hour window. A premium coffee subscription needs to ship same-week. Speed is the business model, not a feature.

Key Takeaways

The trend: Food, grocery, and DTC brands are moving to Next.js because real-time inventory, regional fulfillment, and time-sensitive pricing demand speed that monolithic platforms can’t deliver.

The examples: Seven storefronts spanning food delivery, grocery pickup, premium DTC, toys, and brand merchandise.

Your move: An open-source backend with native multi-region pricing, webhook-driven inventory sync, and zero platform fees pairs with Next.js to give food and DTC brands full control over speed, fulfillment, and margin.

Last verified: April 2026

DoorDash, Wegmans, Starbucks Reserve, Carrefour, and LEGO have built their storefronts on Next.js because headless ecommerce architecture delivers what food and DTC brands need: real-time inventory at the edge, sub-second regional pricing, and fulfillment logic that runs at request time. Here’s what they’re building and how you can replicate it.

Which Food, Grocery & DTC Brands Run on Next.js?

Seven storefronts run on Next.js right now, spanning food delivery, grocery, premium DTC, and brand commerce. DoorDash powers food delivery across 25+ countries with real-time supply and demand balancing. Deliveroo operates a similar model in the UK, EU, and Asia with per-restaurant fulfillment and delivery time guarantees. Starbucks Reserve runs a premium DTC channel for limited-edition coffee, exclusive blends, and subscription tiers.

Wegmans merged online ordering with in-store pickup and delivery across 250+ stores, syncing live inventory at the store level. Carrefour, Europe’s largest retailer, manages ecommerce across 34 countries with localized pricing, currency conversion, and per-country fulfillment rules.

LEGO uses Next.js for DTC toy and building set sales, with regional pricing, VIP member access, and product bundling. Coca-Cola manages brand commerce with limited-edition merchandise, experiential gear, and international shipping complexity. Each of these seven examples represents a distinct architecture decision worth examining.

DoorDash

DoorDash powers food delivery across 25+ countries, and its consumer storefront is essentially a real-time inventory system. Every restaurant updates what’s available every 60 seconds. Every order affects inventory immediately. Every delivery zone has a different ETA and fulfillment cost.

The DoorDash frontend must render restaurant menus, calculate delivery fees in real-time, and update inventory status without blocking the customer experience. A 500ms delay in pricing calculation means a lost order. Their Next.js architecture uses server-side rendering to generate menu pages instantly and API streaming to fetch real-time inventory and pricing without waterfall requests. Delivery zones are cached at the edge and refreshed based on the user’s location.

What sets DoorDash apart from a typical ecommerce storefront is the perishability of inventory. A burrito available at 6:00 PM might not exist at 6:15 PM. The storefront must reflect this in real time, disabling out-of-stock items before a customer even tries to order them.

What to emulate:

• Real-time inventory sync via webhooks, with edge-cached fallback pricing
• Per-delivery-zone fulfillment cost calculation at request time
• Inventory expiry logic built into the order form (disable items for out-of-stock before submission)

With Spree Commerce: DoorDash’s model maps to multi-store architecture (each restaurant is a store) combined with marketplace capabilities for commission and logistics. Webhooks sync real-time inventory from fulfillment networks into the storefront. Price lists handle regional delivery fees and surge pricing. The REST API integrates directly with logistics platforms for fulfillment status updates.

Deliveroo

Deliveroo operates food delivery in the UK, EU, and Asia with the same real-time inventory challenge: restaurants across 14 countries, hundreds of cuisines, and per-restaurant fulfillment windows that change hourly. Unlike DoorDash (which emphasizes marketplace breadth), Deliveroo emphasizes speed and simplicity. The storefront must load a restaurant menu in under one second, calculate delivery time and cost in real-time, and handle language and currency switching across regions without re-rendering.

Their Next.js implementation uses edge computing to calculate delivery zones and ETA from the user’s location in sub-100ms. Restaurant data is fetched server-side but cached at the edge with a 30-second TTL. Middleware routes users to the correct regional API (UK, EU, Asia) before the page even renders. Orders are submitted directly to fulfillment APIs that confirm ETA and assign a delivery partner in real-time.

Deliveroo’s architecture shows how multi-region food commerce works at scale: the frontend is identical across regions, but the data layer is completely different. A customer in London sees GBP pricing, UK restaurants, and local delivery zones. A customer in Dubai sees AED pricing, different restaurant partners, and different fulfillment rules. Same Next.js codebase, entirely different commerce experience.

What to emulate:

• Edge-computed delivery zones with sub-100ms latency
• Multi-region API routing via middleware (not client-side region detection)
• Language and currency switching without page reloads

With Spree Commerce: Multi-region capabilities manage per-country tax, currency, and fulfillment rules. Customer segments can group restaurants by region and delivery zone. Webhooks integrate with your fulfillment network to update delivery ETAs and partner assignments. The REST API handles order submission and status updates without exposing internal logistics data.

Starbucks Reserve

Starbucks Reserve is a premium DTC channel for limited-edition coffee, exclusive blends, and Reserve Club memberships. Unlike the main Starbucks store (which emphasizes volume and convenience), Reserve emphasizes scarcity and storytelling. Their Next.js storefront showcases coffee origins, roast dates, and production batches with high-resolution images. Each product has limited inventory: a microlot might sell out in hours. Subscriptions rotate monthly. Personalization is critical: Reserve members see exclusive offers and preview access to new batches.

The storefront must load product imagery and descriptions instantly, calculate subscription pricing based on membership tier, and show real-time inventory without stale data. Every page is personalized based on past purchases and membership status. Starbucks uses server-side rendering to generate product pages with metadata for social sharing and search engines, and API routes to calculate subscription pricing and member-only offers without exposing pricing rules to the client.

This is the model for any DTC brand selling limited-edition products: scarcity messaging, member-exclusive access, and subscription management all running through the same Next.js frontend.

What to emulate:

• Limited inventory with countdown timers and waitlist mechanics
• Subscription tier logic that shows different pricing and product access per membership level
• Personalization layer that shows member-only content without client-side branching

With Spree Commerce: Headless architecture lets you render Reserve-style product pages in Next.js while Spree handles inventory, pricing, and subscriptions. Customer segments manage membership tiers and exclusive product access. Price lists apply subscription pricing and member-only discounts. Webhooks sync inventory from production batches and trigger waitlist notifications when items restock.

Wegmans

Wegmans is a 100+ year old regional grocery chain with 250+ stores across the Northeast and Mid-Atlantic US. Their ecommerce model merges online ordering with in-store pickup and delivery, so inventory must be accurate at the store level in real time. If milk is out of stock at your local Wegmans, the storefront reflects that within 60 seconds. Same-day pickup is available for 95% of SKUs.

Their Next.js storefront shows available pickup and delivery slots based on live store inventory. The architecture uses store-level inventory sync via API integration every 60 seconds, geolocation middleware to route users to their nearest store, and server-side rendering to generate category and search pages that include real-time availability for the user’s location. Fulfillment status is updated via webhooks as orders move from fulfillment center to pickup shelf.

Wegmans proves that brick-and-mortar grocery chains can compete digitally when their storefront reflects actual shelf inventory. The difference between “available” and “out of stock” at the customer’s specific store is the difference between a completed order and an abandoned cart.

What to emulate:

• Per-store inventory display showing availability at the user’s nearest location
• Geolocation-based store routing without forcing users to select manually
• Fulfillment status integrated into order detail pages (order placed, picked, ready for pickup)

With Spree Commerce: Multi-store architecture models each Wegmans location as a separate store with its own inventory. Multi-warehouse management handles fulfillment centers and distribution. Webhooks sync real-time inventory from store POS systems every 60 seconds. Customer segments enable personalized deals based on loyalty tier and purchase history.

Carrefour

Carrefour is Europe’s largest retailer, operating 3,200+ stores across 34 countries. Their ecommerce challenge is orders of magnitude more complex than a regional chain: 34 different tax regimes, currency conversion, per-country fulfillment rules, and supply chains that vary by region. A customer in France browsing for pasta will see different products, pricing, and delivery options than a customer in Spain, even though both are on carrefour.com.

According to Euromonitor’s 2025 Global Retail report, European grocery ecommerce grew 18% year-over-year, with multi-country operators like Carrefour capturing disproportionate share because they can localize pricing faster than single-market competitors. Carrefour’s Next.js implementation uses middleware to detect the user’s country and route requests to the correct regional API, edge caching to serve regional pricing without hitting databases per request, and server-side rendering to generate region-specific category pages with translated content and localized imagery.

This is the playbook for any brand operating across multiple countries: the frontend is one codebase, the data layer is fully regionalized, and operations teams manage pricing and availability per market without deploying code.

What to emulate:

• Multi-country middleware routing (not relying on browser language settings)
• Per-country pricing with edge-cached rates updated hourly
• Regional product availability where some items are only available in certain countries

With Spree Commerce: Multi-region capabilities manage per-country tax rates, currency, and fulfillment rules natively. Price lists apply regional pricing and promotions. The REST API is called per region, with results cached at the edge. Webhooks keep per-region inventory and fulfillment status in sync across the entire Carrefour network.

LEGO

LEGO uses Next.js for DTC toy and building set sales, with a focus on product bundling, regional inventory, and VIP member access. Their storefront showcases complex product relationships: sets that pair together, retired sets with successor recommendations, and exclusive releases that drop for VIP members before general availability. Inventory is managed per region: some sets are available in North America but out of stock in Europe. Pricing varies by region and currency.

LEGO reported $9.3 billion in revenue in 2024, with DTC ecommerce growing 14% year-over-year. Their Next.js storefront uses server-side rendering for product pages with rich metadata, image optimization for high-resolution product shots and 360-degree views, and API routes to calculate bundle pricing and show member-only offers without exposing pricing rules to the client.

What makes LEGO’s storefront instructive is the complexity of the product catalog. Thousands of active sets, each with age recommendations, piece counts, compatibility with other sets, and regional availability. The headless approach lets LEGO update catalog data (retire a set, launch a new one, change regional availability) without touching the frontend code.

What to emulate:

• Complex product bundling UI with real-time pricing updates
• Regional inventory display with “In Stock,” “Out of Stock,” and “Pre-Order” states
• VIP member exclusive access with membership tier enforcement

With Spree Commerce: Multi-store architecture manages regional inventory and pricing. Customer segments enforce VIP membership tiers and exclusive product access. The REST API powers product recommendations and related items. Headless architecture lets you build a rich Next.js UI while Spree handles inventory, bundling, and order management.

Coca-Cola

Coca-Cola uses Next.js for brand commerce: limited-edition merchandise, experiential gear, and sponsored products. Their storefront blends brand storytelling (heritage, campaigns, limited drops) with the operational complexity of international merchandise fulfillment. Inventory is limited, with editions often selling out in days. Shipping spans 100+ countries. Regional partnerships mean some items are available only in specific markets.

The storefront uses server-side rendering for SEO-heavy campaign landing pages, incremental static regeneration to refresh limited-edition inventory every hour, and API routes to handle complex regional shipping rules and customs calculations. Personalization is lighter than Starbucks Reserve, but past purchase data surfaces relevant limited drops and regional availability.

Coca-Cola shows how brand commerce works for companies that aren’t primarily ecommerce businesses. The storefront exists to deepen brand engagement, not to be the primary revenue channel. But the operational complexity (international shipping, limited inventory, regional availability) is identical to a pure-play DTC brand.

What to emulate:

• Campaign-driven merchandising with time-limited drops
• International shipping with per-region rules and customs messaging
• Limited inventory with clear scarcity messaging (items remaining, percentage sold)

With Spree Commerce: Multi-region capabilities manage per-country shipping rules, customs, and regional availability. Price lists apply region-specific pricing and promotions. Webhooks sync inventory updates from merchandise platforms and trigger scarcity messaging. Headless architecture lets you build Next.js storefronts for different regions independently.

Why Are Food, Grocery & DTC Brands Choosing Next.js for eCommerce?

Food commerce runs on speed. According to Forrester’s 2025 State of Global Ecommerce, grocery and food delivery shoppers expect checkout in under 90 seconds. A three-second page load costs 40% of visitors. A headless ecommerce architecture delivers pages in under one second and updates inventory at the edge without database queries. For food brands, that’s the difference between a completed order and an abandoned cart.

Regional pricing and inventory are non-negotiable. Carrefour operates in 34 countries with different tax rates, currencies, and fulfillment rules. Multi-region inventory and pricing require native backend support, not patchwork third-party plugins. Edge computing calculates per-region pricing at request time, with zero database latency for the customer.

Fulfillment is a first-class feature, not an afterthought. Wegmans’ pickup availability depends on live store inventory. DoorDash’s delivery ETAs shift every 60 seconds. These are order-blocking features that must be calculated in real-time. And personalization compounds: loyalty programs, subscription tiers, and member-only offers are table stakes for food and DTC brands. Customer segments and price lists let teams personalize pricing, inventory display, and product access per customer tier.

SaaS platforms struggle to deliver all of this without add-ons and workarounds. That’s why food, grocery, and DTC brands are building Next.js storefronts on open-source backends like Spree Commerce. See zero platform fees for how this works. The tradeoff is clear: you manage your own infrastructure, but you get complete control over speed, fulfillment, and margin. Pair that with Spree Commerce’s BSD 3-Clause license on the backend, and you have a fully open-source commerce stack with no vendor lock-in on either end.

How Do You Build a Next.js Food or DTC 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, pricing, inventory, orders, payments). Next.js handles the frontend (design, performance, user experience). You own the storefront code and data. You pick your payment processor. Zero platform fees.

For food and DTC specifically, layer these features on top: webhooks for real-time inventory sync from your fulfillment or POS system, multi-region capabilities for per-country tax and fulfillment rules, price lists for time-based and region-specific pricing, and customer segments for membership tiers and loyalty programs.

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.

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 food and DTC storefront 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