VelaCommerce
Back to insightsHeadless

Shopify Hydrogen vs Next.js: choosing your headless stack

Vela Commerce·Apr 12, 2025·9 min read

Both work. Neither is universally better. The right choice depends on your team, your timeline, and your performance requirements. Here's how we decide.

Once you've decided to go headless on Shopify, the next question is the frontend framework. The two serious choices are Shopify's own Hydrogen (built on Remix) and Next.js. Both ship fast, production-grade storefronts. The right answer depends on your team and your constraints — not on which is “better.”

Hydrogen: Shopify's native framework

Hydrogen is a Remix-based framework purpose-built for Shopify, deployed on Shopify's Oxygen hosting at the edge for free. It ships with commerce primitives — cart, product, and Storefront API helpers — designed around Shopify's data model.

Strengths: First-class Shopify integration, generous free edge hosting on Oxygen, commerce components out of the box, and a tightly supported happy path. Less glue code for a pure Shopify storefront.

Weaknesses: Smaller ecosystem than Next.js, tied to Oxygen for the best experience, and a steeper hiring market — fewer engineers know Remix than Next.js.

Next.js: the flexible generalist

Next.js is a general-purpose React framework with the largest ecosystem, broadest hosting support, and the deepest talent pool. It has no commerce primitives — you wire up the Storefront API yourself — but it imposes no opinions about your data sources either.

Strengths: Huge ecosystem and talent pool, host-anywhere (Vercel, Cloudflare, self-hosted), and excellent for storefronts that integrate many data sources beyond Shopify — a separate CMS, search, PIM, or multiple commerce backends.

Weaknesses: More integration code for pure Shopify use cases, and rendering/caching decisions (ISR, edge, streaming) you have to make and own yourself.

How we actually decide

  • Pure Shopify storefront, small team, want the supported path → Hydrogen on Oxygen
  • Shopify is one of several systems (CMS, search, PIM, custom APIs) → Next.js
  • You already run a Next.js team or design system → Next.js, no contest
  • You want zero hosting cost and tight Shopify coupling → Hydrogen
  • You need a specific host (existing Cloudflare or Vercel estate) → Next.js

The honest summary: For a storefront that is mostly Shopify, Hydrogen gets you there with less code and free hosting. For a storefront that is Shopify plus a lot of other systems — or a team already fluent in Next.js — Next.js wins on flexibility and hiring. Both can hit sub-1s LCP. Neither choice is one you'll regret if it matches your team.

Put it into practice

Want this applied to your store?

We help brands apply exactly this kind of thinking to their actual business — working directly with senior specialists, not account managers.

Stay sharp

Commerce engineering, in your inbox.

Occasional, technical, and genuinely useful — engineering perspectives on building faster, better commerce. No fluff.

No spam. Technical depth on commerce engineering. Unsubscribe anytime.