Headless Shopify with Next.js and the Storefront API

Shopify is the world's best commerce backend — battle-tested inventory, reliable checkout, and a mature ecosystem of apps. But default storefront themes are a constraint. Headless Shopify lets you keep the backend you trust while building any frontend you want.

The Shopify Storefront API

The Storefront API is a public GraphQL API that exposes everything a storefront needs: products, collections, customers, carts, and checkout. You query it from your Next.js app — either in Server Components for static content or client-side for interactive operations like cart management.

Product Pages with Incremental Static Regeneration

Product pages are a perfect use case for ISR. At build time, generate the top-selling products statically. For new or less popular products, generate on first request and cache with a revalidation window (e.g., 60 seconds) so price and inventory updates propagate without a full rebuild. This gives you near-instant page loads for cached products while keeping data fresh.

export async function generateStaticParams() {
  const products = await getTopProducts(200);
  return products.map(p => ({ handle: p.handle }));
}

export const revalidate = 60;

Cart Management with the Cart API

Shopify's Cart API (distinct from the legacy Checkout API) is the right choice for modern headless stores. Create a cart, persist the cart ID in a cookie, and all add/remove/update operations are mutations against that ID. On checkout, redirect to the cart's checkoutUrl — Shopify handles payment and fulfilment.

Faceted Search and Filtering

The Storefront API supports filtering via product metafields and variant options. For more sophisticated search — typo tolerance, synonym handling, relevance boosting — layer Algolia or Shopify's Search & Discovery app on top. The UI (filter sidebars, range sliders, real-time count updates) lives entirely in your Next.js component layer.

Real-World Performance Results

In a recent project, migrating from a Shopify Dawn theme to a custom Next.js headless frontend improved Lighthouse performance from 48 to 96. Mobile page load dropped from 4.2s to 1.1s. Mobile conversion rate increased 34% in the first quarter post-launch. The gains come from eliminating theme JavaScript overhead and serving pre-rendered HTML.

Is Headless Right for Your Store?

Headless makes sense when you need custom UX that themes can't deliver, your performance benchmarks require sub-1.5s LCP, you're building an international storefront with complex localisation, or you're integrating Shopify into a larger platform. A well-optimised theme serves small stores fine — but once you hit the ceiling, headless is the answer.