Headless Shopify with Next.js in 2026: Storefront API, the new Hydrogen, checkout and when it pays off

Headless Shopify with Next.js means keeping Shopify for products, orders and checkout, and building the pages your customers see as a separate Next.js site. It is the setup brands reach for when a theme cannot deliver the front end they want: a product configurator, a content-heavy site, or a shop that lives inside a larger web app.

This guide is for founders and e-commerce leads weighing a headless build in 2026. It covers how the pieces connect, what changed when Shopify rebuilt Hydrogen to run inside frameworks like Next.js, how checkout works, the hidden costs, and what AI shopping agents mean for a headless store.

If you are still deciding whether to stay on Shopify at all, start with my comparison of Shopify and a custom e-commerce website. This post assumes Shopify stays as the back end.

How headless Shopify with Next.js fits together

Shopify's headless documentation describes the split. Shopify keeps the commerce engine: catalogue, inventory, orders, payments, staff admin and apps. Your Next.js site handles routing, rendering and content, and talks to Shopify through two APIs:

• The Storefront API serves products, collections, search and the cart, and hands the customer off to checkout.
• The Customer Account API lets customers sign in and see their orders, addresses and profile.

Access is managed through the Headless channel, which Shopify recommends for any storefront you host yourself, whatever the stack. It issues public tokens for requests from the browser and private tokens for requests from your server, lets several storefronts share the same permissions, and lets you rotate credentials. No custom app is needed just to read your catalogue.

A sensible Next.js build renders product pages on the server, caches them and refreshes them when products change, so pages are fast without stale prices. The cart must always be live.

Shopify Hydrogen vs Next.js: no longer either/or

Until this year, the choice was framed as Hydrogen, Shopify's own React framework deployed on its Oxygen hosting, or Next.js, where you wrote the commerce plumbing yourself. That framing is now out of date.

In June 2026 Shopify released a developer preview of a rebuilt Hydrogen, made with Vercel's Next.js team. On 14 October 2026, Hydrogen 2026-10 became generally available. According to Shopify's announcement:

• Hydrogen is now a library that works with any JavaScript framework, with React Router and Next.js starters ready to deploy.
• It handles the commerce parts: cart, variant selection, prices in the buyer's currency, consent-aware analytics, Shop Pay, customer login and accounts, Markets, collection filters and predictive search.
• Your framework keeps routing, data loading and rendering.
• You can host anywhere, including Oxygen, which Shopify says is still free. Vercel maintains Vercel Shop, a Next.js storefront built on Hydrogen.
• Storefronts on the previous Hydrogen keep working, and a migration skill helps coding agents move them over.

So the decision is now about hosting and how much commerce code you want to own:

Option	Good fit	Watch for
Hydrogen with React Router on Oxygen	A storefront that only needs to be a shop	Hosting tied to Shopify
Next.js with Hydrogen, hosted where you choose	Content-heavy sites, or an existing Next.js app adding a shop	A hosting bill and upgrades you manage
Next.js calling the Storefront API directly	A few commerce features inside a larger app	Cart, analytics and consent are yours to build

A caution on timing: the new Hydrogen went generally available the day before this post was written. Expect fixes and changes in its first months, and pin versions.

Checkout stays on Shopify

However custom your front end, checkout is Shopify's. When the customer is ready, your site asks the cart for its checkoutUrl and sends them to Shopify's web checkout. Shopify's cart documentation adds two details that matter in a Next.js build: request the URL when the buyer is ready to go, not when the cart is created, and if a signed-in customer's token is on the cart and you call from your server, pass the buyer's IP in the Shopify-Storefront-Buyer-IP header so they land in a signed-in checkout.

For most brands this is a relief, not a limit. Payments, tax, fraud checks and Shop Pay stay with Shopify. The limit is customisation: changing checkout itself runs on checkout extensions and Shopify Functions, and the main options there need Shopify Plus.

If you run an older headless build, check one thing. Shopify shut down the Storefront Checkout API on 1 April 2025 in favour of the Cart API, so any storefront still built around it has already stopped taking orders that way.

The hidden work in a headless build

My Shopify vs custom guide covers the headline costs: two systems to run, theme apps that stop appearing, and content editing that moves out of the theme editor. In practice, these are the jobs that turn a quick project into a long one:

• The app audit. Admin-only apps carry on unchanged. Anything that injects blocks into the theme, such as reviews, bundles, upsells or size guides, needs an API-based alternative or a rebuild.
• SEO parity. Every product, collection and page URL needs a matching route or a redirect, plus sitemaps, canonical tags and structured data. A theme did this for you.
• Content editing. Decide on day one where marketing edits pages: a headless CMS, Shopify metaobjects or code. Leave it vague and every banner becomes a developer task.
• Markets and currency. International prices and languages must work in your routes, not only in Shopify's settings.
• Analytics and consent. The new Hydrogen handles much of this; a hand-built Storefront API integration does not.
• Upkeep. The Storefront API has a new version every quarter, Next.js ships major versions, and hosting needs watching. Budget for it yearly.

When headless pays off, and when it doesn't

Headless Shopify with Next.js earns its cost when the front end is the product:

• Configurators and custom flows a theme cannot express, such as building a product step by step with live pricing.
• Content and commerce together, where articles, guides or video drive sales and need a proper CMS.
• A shop inside a web app, sharing sign-in and data with a product that already runs on Next.js.
• Several storefronts on one store, such as different brands or regions, which the Headless channel supports.

It rarely pays off when you sell a catalogue through a cart, rely on several theme-based apps, change the site daily through the theme editor, or have no budget for ongoing developer time. In those cases a fast theme beats a slow headless project, and your money is better spent on automating the store behind it.

Agentic Storefronts, UCP and a headless store

AI shopping assistants add a new question to the headless decision. Shopify's Agentic Storefronts make products available in ChatGPT, Microsoft Copilot, Google AI Mode and Gemini through Shopify Catalog. Catalog draws on the product data in your Shopify admin rather than your theme, so a headless front end does not by itself take you out of these channels. Shopify does not publish detailed eligibility rules, so check the Agentic channel in your admin. In ChatGPT, customers complete the purchase on your store's checkout.

What a headless build does change is the agent-facing side of your own domain. Shopify's Hydrogen release notes show it moving fast here: from September 2026, agents using the Universal Commerce Protocol reach the store through the storefront's own domain, and from October they find the store's business profile there. The 2026-10 release also lets agents in WebMCP-enabled browsers search the catalogue and update the cart, with Shopify Checkout submitting the order after the buyer confirms.

The practical point: if you build headless with Hydrogen, these pieces come with the library. If you call the Storefront API directly, they are on your list too. Either way, complete, accurate product data matters more than any front end, as I explain in agentic commerce for online stores.

A practical plan for a headless build

1. Name the one thing the theme cannot do. If you cannot, stay on a theme.
2. Audit apps and URLs before writing code.
3. Choose framework, hosting and Hydrogen or not, using the table above.
4. Set up the Headless channel, with the private token only on the server.
5. Build the cart and checkout handoff first, including signed-in checkout, and test real orders.
6. Build content editing in, not after launch.
7. Match SEO and analytics before switching the domain.
8. Launch on a staging domain first, then switch.

What headless Shopify costs with me

I build web apps and sites in Next.js, which is the version of headless I would offer. My website plans are starting prices: Flexible from $2,500 for a content site you update yourself, and Advanced from $5,000 for sign-in, dashboards and a database and API. A headless storefront is quoted from a brief, because the app audit, the content model and the number of custom flows decide the scope, and any figure before that would be a guess.

Every project gets a fixed quote after a short brief, payment in milestones you can open and try, and the code and accounts in your name. The page on building a website with me explains how it runs. If what you need is automation around your store rather than a new front end, start with e-commerce automation instead.

FAQ

Can I use Shopify Hydrogen with Next.js?

Yes, since October 2026. Hydrogen 2026-10, generally available from 14 October 2026, is a library that works inside any JavaScript framework, and Shopify offers a Next.js starter alongside its React Router one. Hydrogen handles the cart, variant selection, currency, Shop Pay, customer accounts and analytics, while Next.js keeps routing and rendering. You can host it on Vercel, Oxygen or elsewhere. Older Hydrogen storefronts keep working, and Shopify provides a migration skill for coding agents.

Does a headless Shopify store still use Shopify checkout?

Yes. Your front end builds the cart through the Storefront API, then sends the customer to Shopify's web checkout using the cart's checkout URL. Payments, tax, fraud checks and Shop Pay stay with Shopify, which is one of the main reasons to choose headless Shopify over a fully custom shop. Customising checkout itself still depends on your plan, with the main options limited to Shopify Plus.

Do Shopify apps work on a headless storefront?

Some do and some don't. Apps that work in the Shopify admin, such as order tools, inventory sync or automation, carry on unchanged. Apps that add blocks to your theme, such as reviews, upsells or bundles, have no theme to appear in, so each one needs an API-based version, a replacement or a rebuild. List every app and how it reaches customers before you commit to a headless build.

If a headless build is on your list, send me a short brief: what the theme cannot do, the apps you rely on, where your content lives today and when you need it live. You can start a brief for the Advanced website plan, read about my full-stack web development work, or compare the wider options in Shopify vs a custom e-commerce website.