Hydrogen or Next.js for a headless Shopify storefront?

Once you've decided to go headless — and that decision deserves scrutiny first — the next question is what to build the front end with. In practice it's Shopify's Hydrogen or a general-purpose React framework, usually Next.js.

What Hydrogen gives you

Hydrogen is Shopify's React framework for storefronts, built on Remix, and designed around the Storefront API.

• Commerce components and hooks already built — cart, variant selection, money formatting, image handling.
• Storefront API integration wired up, with sensible caching defaults for commerce data.
• Oxygen — Shopify's hosting, deployed at the edge, included with your plan.
• Shopify-aware defaults, including customer accounts and checkout handoff.
• Analytics and Shopify's own tooling connected rather than reimplemented.

The value is the same as any framework built for a purpose: the twenty commerce problems you'd otherwise solve yourself are solved.

What Next.js gives you

• A much larger ecosystem — more developers, more libraries, more answers to search for.
• Freedom in what else the app does. If commerce is one part of a larger application, this matters.
• Hosting anywhere, on infrastructure you may already run.
• Familiarity, if your team already builds in Next.js.

The cost: you build the commerce layer. Cart state, variant logic, price formatting, caching strategy for commerce data, the Cart API integration — all of it is yours.

How to choose

Choose Hydrogen when:

• The storefront is the product, and it's a shop.
• You want Shopify's hosting and don't want to run infrastructure.
• The team is comfortable with Remix conventions.
• You want commerce primitives rather than building them.

Choose Next.js when:

• Commerce is one part of a larger application.
• You have an existing Next.js codebase or design system to live inside.
• You need hosting on specific infrastructure.
• Your team's skills are the deciding constraint — a team that knows Next.js will ship a better product in Next.js.

The things that are the same either way

Whichever you pick, these don't change and they're most of the difficulty:

• You own SEO. Server-side rendering is not optional. A client-rendered storefront is invisible to crawlers and slow on real devices — headless SEO.
• You lose the theme editor. Merchandisers cannot rearrange pages unless you build that capability. Teams that live in the theme editor feel this on day one.
• Apps get harder. Many Shopify apps inject into Liquid themes and simply don't apply. Each becomes a build-or-replace decision — custom apps vs third-party.
• Checkout is still Shopify's. You hand off to it. This is a good thing.
• You now maintain a codebase, a deploy pipeline and dependencies.

Performance

Both can be very fast. Neither is fast automatically.

Hydrogen on Oxygen starts closer to fast, because the caching and edge deployment are configured for commerce out of the box. A well-built Next.js storefront matches it; a badly built one is slower than the Liquid theme it replaced.

That last case is common enough to mention: headless is a higher ceiling and a higher floor of effort — Storefront API vs Liquid.

The pragmatic middle

Worth repeating because most stores that "use the Storefront API" do this rather than going fully headless: keep the storefront in Liquid and build one high-value piece — a configurator, a live search, a fast custom cart — against the Storefront API inside the theme.

You get API-driven control where it matters and keep the theme editor, the app ecosystem and Shopify's SEO handling everywhere else. Progressive headless.

Hydrogen if the storefront is a shop and you want Shopify's opinions. Next.js if commerce is part of something larger, or if it's what your team already knows well.