Shopify Hydrogen vs Next.js: Which Headless Stack Should Your Brand Choose?

What Shopify Hydrogen is, how it compares with Next.js for headless Shopify, what Oxygen hosting includes, and how to choose the right stack.

TL;DR: Shopify Hydrogen is Shopify's own React framework for building a headless Shopify site. Headless means you build your own front end and get products, cart and checkout from Shopify through an API, instead of using a Shopify theme. Hydrogen runs on React Router, and you can host it at no extra cost on Oxygen, Shopify's hosting. Next.js is a general React framework that many headless Shopify sites use. Pick Hydrogen when almost everything you sell and publish lives in Shopify. Pick Next.js when your site also needs a separate CMS, data from other systems or content for several markets.

I build headless Shopify sites on Next.js, with DatoCMS for content and Vercel for hosting. Hydrogen isn't part of my stack. This article still tries to be fair to it, including the cases where Hydrogen is the better pick.

What is Shopify Hydrogen?

Hydrogen is Shopify's framework for building your own front end on top of Shopify, instead of using a Liquid theme. Shopify describes Hydrogen projects as "React Router apps with a set of preconfigured options, bundled with a collection of Shopify-optimized components and utilities" (Shopify.dev).

In practice you get:

• A client for the Storefront API, the Shopify API that serves products, collections and the cart.
• Ready-made helpers for the cart, SEO and analytics, so you don't write them from scratch.
• Caching for catalogue data. The July 2026 developer preview lets you cache each Storefront API query at the edge, on servers close to the visitor (Hydrogen release notes).
• A typed client for the Customer Account API, for logged-in pages such as order history. This was also added in the July 2026 preview.
• Deploys to Oxygen, Shopify's hosting, with one command.

Hydrogen was first built on Remix. Remix has since merged into React Router, and current Hydrogen versions run on React Router 7 (Weaverse).

What is Oxygen, and what does it cost?

Oxygen is Shopify's hosting for Hydrogen sites. Shopify calls it "Shopify's global deployment platform that's built for hosting Hydrogen storefronts at the edge." Every change gets its own preview environment, so you can check it before it goes live.

Oxygen costs nothing extra on the Starter, Basic, Grow, Advanced and Plus plans, and on the Pause and build plan. It is not available on Agentic plans (Shopify.dev).

Oxygen has limits. Know them before you plan heavy work on the server:

For a normal shop these limits are plenty. They matter when your server does a lot for each page view. Think complex personalisation, large content transforms or several calls to other services per request. If Oxygen doesn't fit, you can host Hydrogen yourself.

What does Next.js do in a headless Shopify setup?

Next.js is a widely used React framework for websites. Vercel makes it, not Shopify. In a headless Shopify build:

• Next.js builds the pages your customers see.
• Shopify supplies products, cart and checkout through the Storefront API.
• A headless CMS holds the editorial content. That is a content system without a fixed design, such as DatoCMS.

Vercel also maintains Next.js Commerce, a starter shop. Shopify is the only version Vercel actively maintains (Vercel).

I use this setup myself. Orangefit is a Dutch plant-based nutrition brand that sells in several markets and languages. Its site runs on Next.js, Shopify and DatoCMS, hosted on Vercel. It connects to Algolia (search), Firmhouse (subscriptions), Yotpo (loyalty), Klaviyo (email) and Virtuagym (coaching memberships). Its Core Web Vitals, Google's scores for loading speed, responsiveness and layout stability: 1s LCP, 143ms INP and 0.02 CLS. Time to First Byte is 0.2s. All Core Web Vitals pass.

Shopify Hydrogen vs Next.js side by side

Both use React. Both get products from the same Storefront API. Both send customers to Shopify's checkout. The difference is what the project is built around. Hydrogen is built around Shopify. With Next.js, Shopify is one of several services your site gets data from.

When is Hydrogen the right choice?

Choose Hydrogen when most of these are true:

1. Shopify is your only real back end. Your content fits in Shopify: products, collections and metaobjects (Shopify's custom content fields). You don't need a separate CMS.
2. You don't want to think about hosting. Oxygen is included in your plan and deploys straight from your code repository.
3. Your developers are happy to work the Shopify way. Hydrogen makes many choices for you. That saves time if you follow them.
4. You run one main shop. You want a faster, more custom shopping experience, not a content platform.
5. You want Shopify's newest headless features early. The July 2026 developer preview, for example, added the Customer Account API client and WebMCP. WebMCP lets AI agents in the browser search products, update the cart and start checkout (Hydrogen release notes).

When is Next.js the better choice?

Choose Next.js when most of these are true:

1. Content helps sell your products. Stories, lookbooks, recipes and campaign pages need a proper CMS with building blocks your team can combine. At The Laundry Story, DatoCMS decides which pages exist and how they are put together. Product pages load Shopify data first and add DatoCMS content when there is some. So the shop keeps working even when a product has no extra content.
2. Several systems feed the site. Subscriptions, loyalty, search, coaching or ERP data sit next to Shopify. Next.js doesn't care where data comes from.
3. Your website is more than a shop. Brand stories, events, job pages or WebGL (3D in the browser) run on the same domain. The same Next.js and DatoCMS setup runs Milkshake Festival, a site that has to handle traffic peaks and let editors publish fast.
4. You want to keep the option to switch platforms. If you ever replace Shopify or add another platform, your Next.js front end and CMS content can stay.
5. You want developers to be easy to find. There are more Next.js developers than Hydrogen developers, in-house and freelance.

Not sure which fits? Send me your current setup and plans. I'll tell you honestly whether headless is worth it at all, and which stack fits. Book an intake call.

Hydrogen or Liquid: do you need headless at all?

Dutch brands often ask this as "Hydrogen of Liquid?". Answer it before you choose between Hydrogen and Next.js. Liquid is the template language of normal Shopify themes. A well-built Shopify (Plus) theme is fast, cheaper to maintain and works with all Shopify apps. Headless, with Hydrogen or Next.js, makes sense when:

• the theme limits your design or user experience,
• content and products need to mix more than theme sections and blocks allow,
• you run several markets or brands, each with a lot of its own content, or
• you can't hit your speed targets with a theme full of apps.

Many Shopify apps add features through theme app extensions. Those don't work on a headless site. You then need the app's API or a custom integration. The e-commerce services page explains both routes, native and headless.

Is Hydrogen faster than Next.js?

Not by default. Speed depends on how the site is built, not on the framework. Both can render pages on the server, cache them close to the visitor and send little JavaScript to the browser. Both get slow with heavy scripts, large images and too many tracking tags.

Two facts do matter:

• The Storefront API grows with your traffic. Shopify says requests from real buyers have no fixed per-minute limit. Bots and crawlers are limited, and checkout creation is throttled per minute (Shopify.dev). That is the same for both frameworks.
• Speed pays. In a study by 55 and Deloitte for Google, a mobile site that was 0.1 seconds faster led to 9.1% more retail visitors going from product page to basket. They also spent 9.2% more (web.dev).

So choose the framework that fits your setup. Then agree on Core Web Vitals targets with whoever builds it, and measure them at launch.

What about GDPR and EU hosting?

For Dutch and EU brands, the choice also affects where your server code runs and which tools see personal data. Oxygen runs on Shopify's global network. With Next.js you pick your own host, such as Vercel or an EU-based provider, and you have more say over where server functions run. Either way, keep checkout, customer accounts and consent inside Shopify's own privacy tools. List every third-party script in your cookie consent setup. The framework doesn't decide this. Your hosting and tracking choices do.

Shopify Hydrogen vs Next.js: a 10-question checklist

Answer yes or no:

1. Is more than about 80% of your site's data in Shopify?
2. Can your marketing team manage content in Shopify metaobjects without getting frustrated?
3. Is one shop (not several brands or sites) your main focus?
4. Do you want Shopify to host and manage the site?
5. Will your developers follow Shopify's way of working and release schedule?
6. Do you use a headless CMS for campaigns and editorial pages?
7. Does the site pull data from subscription, loyalty, search or ERP tools?
8. Does the domain host things other than the shop, such as events, job pages or 3D/WebGL?
9. Is avoiding platform lock-in important for the next five years or more?
10. Do you need many developers to be able to take over the code?

Mostly yes on 1 to 5: Hydrogen fits well. Mostly yes on 6 to 10: Next.js is probably the better base. Mixed: start with a scoping session. The answer often comes down to the one or two integrations with the most risk.

How I handle headless Shopify projects

Every build gets a fixed price. The steps are intake, scope and proposal, build, iteration, handover, and maintenance without retainer contracts. For headless Shopify that means I:

• list every data source (Shopify, CMS, search, subscriptions) before writing any code,
• design CMS blocks your marketing team can use without breaking the layout,
• agree on Core Web Vitals targets up front and measure them at launch, and
• document the setup so another developer can take it over.

FAQ

What is Shopify Hydrogen? Shopify Hydrogen is Shopify's open-source React framework for building a headless Shopify site. It runs on React Router, comes with Shopify tools for the cart, customer accounts and caching, and deploys to Oxygen, Shopify's hosting.

Is Shopify Hydrogen free? The framework is open source. Oxygen hosting costs nothing extra on the Starter, Basic, Grow, Advanced and Plus plans. You still pay for your Shopify plan and for building the site, which is the biggest cost.

What is the difference between Shopify Hydrogen and Oxygen? Hydrogen is the framework you build the site with. Oxygen is the hosting that runs it. You can also host Hydrogen yourself.

Is Shopify Hydrogen better than Next.js? Neither is better in general. Hydrogen suits brands that run almost everything in Shopify and want the shortest route to headless. Next.js suits brands that combine Shopify with a headless CMS, other data sources or pages beyond the shop.

Hydrogen or Liquid: which should a Dutch webshop choose? Most webshops do best with a well-built Liquid theme. Consider headless (Hydrogen or Next.js) only when you can't reach your design, content, multi-market or speed goals with a theme.

Do Shopify apps work with Hydrogen or other headless sites? Apps that add features through theme app extensions don't work on a headless site. Apps with an API can usually be connected, but that is custom work. Check your app list during scoping.

Ready to choose your headless stack?

Hydrogen, Next.js or a better Shopify theme: the right choice depends on your content, your integrations and your team. I build headless Shopify sites that marketing teams in the Netherlands and across the EU can run themselves. Tell me about your shop and you'll get a clear, fixed-price proposal. Or email info@petercoolen.com or call +31 6 57 54 60 27.

Sources

• Shopify.dev: Hydrogen and Oxygen fundamentals
• Shopify.dev: Storefront API (rate limits)
• Hydrogen developer preview release notes, 8 July 2026
• Vercel: Next.js Commerce template
• web.dev: Milliseconds Make Millions (55 and Deloitte, for Google)
• Weaverse: Hydrogen May 2026 update (React Router 7)