By Mehdi Hassan
What's the difference between Shopify Hydrogen and Next.js?
Hydrogen is Shopify's own React framework for building headless storefronts, while Next.js is a general-purpose React framework from Vercel that can power a Shopify storefront among many other things. Both fetch products, collections and carts from Shopify's Storefront API and send shoppers to Shopify's checkout. What differs is who made the tooling, where it's hosted and how much it assumes about your store.
Hydrogen is built on React Router, the framework formerly known as Remix, and ships with commerce components, cart utilities and caching tuned for Shopify. It deploys to Oxygen, Shopify's hosting. Next.js has no opinion about commerce: you add Shopify through its libraries or your own data layer, and you host it on Vercel or any Node or edge platform. If you haven't decided whether to go headless at all, start with our hub on whether headless Shopify is worth it.
A note on bias: we build marketing sites and storefront front ends in Next.js, and we're not a Shopify partner agency. We'll say where Hydrogen is the better pick, because for some stores it clearly is.
Shopify Hydrogen vs NextJS: how do they compare?
Hydrogen is the more convenient choice for a pure Shopify store; Next.js is the more flexible choice for everything around the store. The table compares them on the factors that actually change the decision.
Factor | Hydrogen | Next.js |
|---|---|---|
Maker | Shopify | Vercel, open source |
Routing and data | React Router loaders and actions | App Router, server components, route handlers |
Shopify helpers | Built in: cart, analytics, SEO and caching utilities | Shopify libraries or your own; more wiring |
Hosting | Oxygen, Shopify's hosting | Vercel, Cloudflare, Netlify or your own servers |
Non-Shopify data | Possible, less common | Normal: CMS, search, reviews, internal APIs |
Hiring pool | Smaller, Shopify-specific | Large, general React and Next.js developers |
Lock-in | Tied to Shopify's roadmap and hosting | Portable framework; Shopify is one data source |
Best fit | Commerce-first Shopify store | Content-led brand or multi-source storefront |
Neither is faster by default. Both can produce very quick storefronts, and both can be slow if you load too much on the client. Performance depends on caching, images and scripts far more than on the framework name. Our guide to Core Web Vitals on Framer, Webflow and Next.js covers the Next.js side of that work.
When is Hydrogen the better choice?
Hydrogen is the better choice when Shopify is the center of everything and your team wants Shopify to own as much of the stack as possible. You get a framework designed around the Storefront API, hosting from the same company that runs your checkout, and patterns that match Shopify's documentation.
- Your pages are mostly product and collection pages. Content is light and fits in Shopify metaobjects.
- You want one vendor. Hosting, commerce and framework all come from Shopify, which simplifies support conversations.
- Your developers are Shopify specialists. Hydrogen's commerce helpers save them real time on carts, variants and analytics.
- You plan to stay on Shopify for the long term. The lock-in that Hydrogen brings matters less if you'd never move platforms anyway.
The trade-off is that you're following Shopify's framework choices. Hydrogen has already changed its foundation once, from its own early approach to Remix and then React Router, and your team moves when Shopify moves.
When is Next.js the better choice?
Next.js is the better choice when your storefront is really a content site with a shop inside it, or when Shopify is only one of several systems feeding the pages. It's also the safer choice when you want to hire from a wide pool or keep the option of changing commerce platforms later.
- Content leads. Editorial stories, guides and campaigns sit next to products, managed in a headless CMS.
- You combine data sources. Search, reviews, a PIM, a CMS and internal APIs all feed the same page.
- You already run Next.js. Your marketing site, docs or app are on Next.js, so one team and one set of patterns covers it all.
- You want portability. Shopify becomes a data source rather than the foundation, so a future change of commerce engine doesn't mean a new framework.
The cost is more wiring. You'll build or adopt the cart, analytics and caching layers that Hydrogen hands you. Teams that design in Figma and build in Next.js often find this worth it, and our guide on Figma to Next.js shows how that handoff works.
How do hosting, cost and lock-in differ?
Hosting is the clearest practical difference: Hydrogen deploys to Oxygen, which Shopify includes with most plans, while Next.js runs on a host you choose and pay for separately. Check Shopify's current plan pages for Oxygen's terms, and your host's pricing for traffic-based costs, because both change.
Build cost is closer than people expect. The expensive parts of any headless storefront are the same in both: design, rebuilding app features, tracking, URL mapping and QA. Hydrogen saves some time on commerce plumbing; Next.js saves time when content and other data are central. Our headless Shopify cost guide covers the ranges and what drives them.
Lock-in runs in different directions. Hydrogen ties you to Shopify's framework and hosting. Next.js ties you to whichever host features you adopt, though it remains portable. In both cases, your bigger lock-in is the custom code you write, so keep it clean and documented.
Hypothetical example: two brands, two answers
For example, suppose two brands are going headless. The first sells one product line, has a small catalog, publishes little content and has a Shopify-specialist developer on staff. Hydrogen fits: the developer gets commerce helpers, Shopify hosts it, and there's no CMS to integrate.
The second publishes weekly stories, recipes and guides that feature products, runs its marketing site on Next.js already and uses a headless CMS. Next.js fits: one framework covers content and commerce, and the same team maintains both. Same Storefront API, different best answer.
Do you need either one?
Many stores don't need either, because a strong theme plus custom landing pages solves the actual problem. Before picking a framework, make sure headless itself is justified by content, integration or multi-storefront needs, and that someone will maintain the storefront after launch.
If you're already headless and the upkeep outweighs the benefit, the honest move might be going back to a theme; we cover that in when to undo headless. And if you're comparing the full cost of each route, our DTC website cost guide puts theme, custom theme and headless side by side. If the decision is go, our guide to migrating a Shopify theme store to headless covers the cutover.
