A production-grade headless commerce storefront on Next.js with Shopify as the backend — server-rendered catalogue and product pages for search performance, optimistic cart updates for a checkout that feels instant, and internationalisation built in from the start.
A headless commerce storefront that keeps Shopify as the commerce engine — catalogue, inventory, checkout, payments, tax — while owning the entire customer-facing experience in a Next.js application.
That split is the point of the architecture. A merchant keeps the admin, the fulfilment tooling, and the payment infrastructure their operations team already runs, and gives up nothing on the storefront: no theme constraints, no Liquid, no waiting on a platform release to change how a product page behaves. The trade is that performance, routing, caching, and state become the developer's responsibility — which is where most of the engineering in this build went.
Catalogue and collection pages with server-rendered listings, so category pages are indexable and fast on first load
Product detail pages with variant selection, media galleries, and availability driven live from Shopify
Search and filtering across the catalogue
Cart with optimistic updates — the UI reflects an add or a quantity change immediately and reconciles with the API behind it, so the interaction never feels like it is waiting on a network round trip
Checkout handoff to Shopify's hosted, PCI-compliant flow, which is the correct boundary: no reason to reimplement payment handling and inherit its compliance burden
GraphQL against the Storefront API — precise queries requesting exactly the fields a page renders, rather than over-fetching a REST resource and discarding most of it
Rendering strategy chosen per route — static generation for stable catalogue content, server rendering where data must be current, so each page pays only the cost it needs
Dynamic metadata per product and collection, generated from the catalogue data, so every page has correct titles, descriptions, and social previews without manual authoring
Image optimisation and lazy loading throughout, since product imagery is the dominant page weight in any storefront
Internationalisation built into the routing layer rather than retrofitted
Dark mode as a first-class theme
Typed end to end — the GraphQL schema drives TypeScript types, so a catalogue field change surfaces as a compile error rather than a blank space in production
Playwright end-to-end tests covering the critical path — browse, add to cart, reach checkout — which is the flow that must never silently break
Component-based composition with a clear separation between server data-fetching and client interactivity
State handled at the right level — React context and hooks for cart and UI state, server state left to the framework's caching layer rather than duplicated into a client store
Accessible interactive components built on Headless UI primitives, so keyboard and screen-reader behaviour comes from the library rather than being reimplemented
Toast feedback on every cart mutation, so an optimistic update always has a visible confirmation
This build is a reference implementation of headless commerce done properly: the merchant keeps the operational platform they depend on, the storefront gets the performance and flexibility a modern framework provides, and the boundary between the two is drawn where it should be.