If you’ve decided to build a headless Shopify store, Hydrogen and Next.js are both reasonable options to investigate. The difficult part is choosing the one your team can live with after launch.
The frameworks don’t decide how good the store will look. Hosting, content editing, integrations and the people maintaining the code are usually more useful points of comparison.
Start there, then test the hardest customer journey in the stack you’re considering.
First, are you sure about headless?
This guide assumes the headless decision is made. If it isn’t, start with our comparison of headless Shopify cost versus Shopify Plus. Many brands that consider headless get what they need from a well-built theme on Shopify or Shopify Plus, with far less to maintain.
What each framework gives you
Hydrogen is Shopify’s own framework for headless storefronts. It comes with commerce-specific building blocks and conventions, and Shopify provides Oxygen, its hosting for Hydrogen storefronts, deployed straight from the Hydrogen CLI.
Next.js is a general-purpose React framework with a very large ecosystem. It isn’t commerce-specific, so you connect it to Shopify yourself or with libraries, and you choose your own hosting.
Your existing systems and team experience will influence the choice as much as the feature lists.
How they compare
| Question | Hydrogen | Next.js |
|---|---|---|
| Who builds it | Shopify | Vercel and the open-source community |
| Commerce features | Built-in components and utilities for carts, products, and analytics | You build or assemble them on the Storefront API |
| Hosting | Oxygen, run by Shopify, with deployment through the Hydrogen CLI | Any host you choose, most often Vercel |
| Ecosystem | Smaller, Shopify-focused | Very large, general-purpose |
| Hiring | Fewer developers have shipped it | Many developers already know it |
| Shopify alignment | Tracks new Shopify capabilities closely | Depends on your own integration work |
| Non-Shopify content and systems | Possible, with less precedent | Common, with many existing integrations |
When Hydrogen is the better fit
- Shopify is the center of the business. Commerce is the main job of the site, and content is mostly product-led.
- You want fewer moving parts. Shopify-run hosting removes one vendor relationship and one set of infrastructure decisions.
- You want to stay close to Shopify’s roadmap. New storefront capabilities tend to land in Shopify’s own tooling first.
- Your team, or your agency, already knows it. Existing experience can reduce the learning and support work the project needs.
When Next.js is the better fit
- The site is more than a store. Editorial content, a large content hub, a multi-brand site, or a web app sitting alongside commerce.
- Shopify is one system among several. If the frontend also reads from a CMS, a PIM, a booking system, or your own APIs, a general framework handles that naturally.
- Your team already runs Next.js. Shared knowledge, shared deployment pipelines, and shared components are a real cost saving.
- You want hosting choice. Infrastructure, regions, and vendor relationships stay in your hands.
Questions for the team building it
Who maintains it after launch? A headless storefront is a software product. Dependencies need updates, the Storefront API is versioned, and features need building. Pick the framework your long-term team can maintain, not the one that wins the launch pitch.
How will the merchant team edit content? Shopify’s theme editor doesn’t control a separate headless frontend. You’ll need to provide an editing and preview workflow, perhaps with a CMS, Shopify metaobjects or both. Make content editing a requirement in the architecture, not an afterthought.
What about apps? Many Shopify apps assume a theme and inject scripts into it. In headless, check whether each needed app offers an API, a headless integration or another supported way to deliver its feature. Inventory your apps early. This often decides more than the framework does.
How will analytics, consent, and checkout handoff work? Both options can handle them, but someone has to set them up and test them.
What happens if you want to change direction? Framework-specific code is a commitment. Keep Shopify data access and business logic in clear, separate layers so a future rebuild doesn’t mean rewriting everything.
A safer way to decide
- Write down the constraint. What does the theme stop you from doing? If you can’t name it, revisit the headless decision.
- List the systems. Shopify, CMS, search, reviews, subscriptions, ERP, and analytics. Mark how each connects.
- Prototype the hardest page. Usually a product page with variants, content blocks, and app data. Build it in the candidate stack before committing.
- Price the next three years, not just the build. Hosting, maintenance, upgrades, and the team to run it.
Choose with the maintenance team
Hydrogen is worth testing when commerce is the main job and Shopify’s tooling fits your requirements. Next.js deserves a close look when it matches the team’s existing stack or the frontend has substantial work beyond commerce.
Before committing, agree on how content, integrations and releases will work. That’s what our Headless Architecture Review is for: deciding the stack against your constraints before the build begins.