Search intent: informational/procedural — developers building a headless Shopify storefront on Next.js. We cover the Storefront API, the per-route rendering strategy, cart and checkout, SEO and edge caching, and whether you need Hydrogen. It builds on our Shopify Storefront API and rendering strategy guides.

Next.js Shopify headless architecture — Storefront API data, per-route rendering, cart mutations and Shopify-hosted checkout by CodeAtoZ

A Next.js Shopify build talks to Shopify through the Storefront API — a GraphQL API exposing products, collections, cart and customer data with a public access token safe for frontend use. You query exactly the fields each page needs, and the @inContext directive serves market-correct prices and translations for Shopify Markets. The cardinal rule of Next.js Shopify security: use the Storefront API (public, read + cart) from the frontend, and keep the Admin API (privileged) strictly server-side, never shipped to the browser.

// lib/shopify.ts
const endpoint = `https://${process.env.SHOPIFY_DOMAIN}/api/2025-01/graphql.json`;
export async function shopify(query: string, variables = {}) {
  const res = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': process.env.SF_TOKEN!,
    },
    body: JSON.stringify({ query, variables }),
    next: { revalidate: 60 }, // ISR: refresh product data every 60s
  });
  const { data, errors } = await res.json();
  if (errors) throw new Error(JSON.stringify(errors));
  return data;
}

The Next.js Shopify rendering strategy is per-route: ISR for product and collection pages (static speed, periodic price refresh), SSR for cart and account (always fresh). Cart lives via Storefront API cart mutations — create a cart, add lines, and persist the cart ID in a cookie. For checkout, the pragmatic Next.js Shopify default is to redirect to Shopify’s hosted checkout: it keeps PCI compliance scope off your application and inherits Shopify’s conversion-optimised, fraud-protected flow. Full in-app checkout is possible via Checkout Extensibility but adds compliance work most stores do not need. The Storefront API documentation details the cart mutations.

For SEO, a Next.js Shopify storefront must server-render crawlable HTML with proper titles, meta and product structured data — never client-only rendering. Cache pages at the edge and revalidate via Shopify webhooks on product changes for static-speed freshness. On the common question — Hydrogen vs plain Next.js Shopify: Hydrogen is Shopify’s own React framework (built on Remix) with commerce primitives baked in and first-class Oxygen hosting; plain Next.js gives you a larger ecosystem, more hosting freedom, and is the right pick if your team already runs Next.js. Both are valid; choose by team familiarity. The Next.js documentation and Hydrogen docs cover each path. Our Shopify development team builds both.