Hydrogen vs Next.js for Headless Shopify: Build Cost, Performance, and What Breaks in 2026

For most premium DTC brands in 2026, Next.js is the better headless Shopify frontend because it gives you design freedom, hosting choice, and the option to integrate beyond Shopify. Hydrogen wins on cost and time-to-launch for brands fully committed to Shopify's ecosystem who want an opinionated, lower-friction path with free Oxygen hosting and built-in Storefront API hooks.

The honest version of this decision

I quote headless Shopify builds every week, and the Hydrogen vs Next.js question always shows up by the second call. Usually the brand has read three blog posts already. Two of them were vendor-biased (Shopify's own marketing, or a Vercel case study). The third was a Reddit thread from 2023 where half the answers are now wrong because Hydrogen rebuilt itself on Remix in 2024 and Next.js shipped Server Components.

So the goal here is simple. No vendor allegiance. Real numbers. The parts that break in production once you have shipped a few of these.

I default to Next.js for the brands I work with, but I have built on Hydrogen and there are specific scenarios where it is the better answer. I will tell you which.

What Hydrogen actually is

Hydrogen is Shopify's official headless framework. As of 2024 it runs on Remix (not its own custom runtime any more, which was a significant rewrite). It ships with built-in hooks for the Storefront API, opinionated patterns for cart, product, collection, and search, and deploys to Oxygen, Shopify's edge hosting platform.

Oxygen is free if you are on a paid Shopify plan. That is the headline. No Vercel bill, no Cloudflare Pages limits to think about, no separate hosting contract. The runtime is V8 isolates at the edge, which means cold starts are near-zero and global latency is good by default.

The pitch is straightforward. Hydrogen is built by the same company that owns the data layer you are pulling from. The Storefront API gets new features in Hydrogen first. Cart logic, checkout handoff, customer accounts, B2B, and Markets all have first-class support. You are not writing API glue code, you are using their components.

The trade-off is opinion. Hydrogen has a way it wants you to build things. If your design system fits that way, you ship faster. If it does not, you fight the framework.

What Next.js gives you that Hydrogen doesn't

Next.js 15 with React 19 Server Components is a general-purpose React framework. It does not care that you are using Shopify. It is happy to talk to Shopify, Sanity, Klaviyo, Algolia, Stripe, your own database, and a configurator microservice in the same app.

Three things matter here in 2026.

Hosting choice. You can deploy to Vercel, Cloudflare Pages, Netlify, AWS, your own infrastructure. If your CTO wants you on Cloudflare for the bandwidth pricing, you go. If you want Vercel's preview deployments and analytics, you go. Hydrogen locks you to Oxygen. Not a problem until it is.

Design system freedom. Next.js has no opinion about how your product page looks. You can build any layout, any interaction pattern, any animation system. The brands I work with care a lot about this. Premium DTC product brands do not want their site to look like a Shopify theme that has been re-skinned. They want bespoke. Next.js makes bespoke cheaper to build because you are not unlearning a framework's defaults.

Integrations beyond Shopify. Klaviyo for email capture and quizzes. Sanity or Contentful for content the marketing team owns. Algolia or Typesense for search that does not suck. A custom configurator. A subscription portal. A community section. Hydrogen can do all of these, but you are wiring it yourself and the framework gives you nothing for it. In Next.js, the ecosystem assumes you are doing this. The integrations are first-class.

The bigger structural point. Next.js does not lock you to Shopify forever. If you migrate to BigCommerce, Swell, Medusa, or a custom commerce backend in five years, your frontend stays. You swap the data layer. With Hydrogen, you are starting over.

Where Hydrogen wins

Three specific scenarios.

Brands fully committed to Shopify long-term. If you are on Shopify Plus, you intend to stay on Shopify Plus, and your product strategy does not involve anything Shopify cannot do (large-scale custom B2B portals, multi-vendor marketplaces, complex configurators), Hydrogen's tight coupling is an advantage. New Shopify features land in Hydrogen first. B2B, Markets, customer accounts, all easier.

Teams without strong frontend opinions. If you do not have a designer with a strong vision and an in-house dev team to back it up, Hydrogen's opinionation saves you from yourself. The framework decides the shape. You fill in colours and copy. This is genuinely the right answer for some brands, even premium ones, when the priority is shipping a clean, fast site and iterating on product and marketing.

Small budget, time-to-launch sensitive. If the budget is £6,000 to £8,000 and you need to be live in three weeks, Hydrogen is faster. You skip the architectural decisions, you skip wiring the integrations, you skip writing the cart provider. You ship.

Where Next.js wins

Three specific scenarios.

Brands with a strong design vision. If your designer has been doing premium DTC for five years and the site is the brand, Next.js is the right floor. You are not going to be fighting a framework. Animation systems, custom product page layouts, interactive product visualisers, scroll-driven hero sections, all easier when the framework does not have a preferred way for these to look.

Brands building beyond Shopify. Content the marketing team owns in Sanity. A library of long-form articles for GEO. A quiz funnel feeding Klaviyo. A subscription portal that lives outside Shopify Subscriptions. A B2B request-a-quote flow. If your roadmap has more than just Shopify in it, Next.js is the cheaper home for all of it.

Brands that might migrate platforms in five years. Founders who say "we will probably stay on Shopify forever" sometimes do not. If there is a 30 percent chance you will be on a different commerce platform in five years, Next.js protects that optionality. The frontend stays. The integration layer changes. Hydrogen does not give you that.

The build-cost reality

The honest number ranges for a launched, production-ready headless Shopify build in 2026.

Solo specialist tier. Hydrogen £6,000 to £10,000. Next.js £8,000 to £12,000.

Small studio tier. Hydrogen £10,000 to £18,000. Next.js £12,000 to £22,000.

Mid-tier agency. Hydrogen £15,000 to £30,000. Next.js £20,000 to £45,000.

Enterprise build. Hydrogen £40,000+. Next.js £60,000+.

The Next.js range sits roughly £2,000 to £4,000 higher at the solo and small-studio tier. Three reasons.

More design freedom takes more design time. Custom product page layouts take longer to build than Hydrogen's defaults. That is the whole point, but it costs hours.

More wiring. The cart provider, the Storefront API client, the checkout handoff, the customer account flow. Hydrogen ships these. Next.js, you build or pull from a library and adapt.

More integration setup. If the build includes Sanity, Klaviyo, Algolia, or a configurator, that is real engineering time. Hydrogen builds often skip these on launch and add them later. Next.js builds tend to include them on day one.

The difference is smaller than the framing online suggests. People will tell you headless on Next.js is "two or three times the cost" of Hydrogen. It is not. It is 20 to 30 percent more at the solo and small-studio tier, and the gap closes further at the agency tier because integration costs dominate either way.

What actually breaks in headless builds

This section applies to both frameworks. Most blog posts on this topic do not mention any of this.

Third-party Shopify apps that ship Liquid widgets. Your client uses a subscriptions app, a review app, a bundles app, a loyalty app. On a themed Shopify site, the app injects a Liquid snippet and it works. On a headless site, the app's Liquid widget does not run. You need the app to have a Storefront API, a JavaScript SDK, or a headless integration path. Many do not. Some have an integration but it is half-baked. Check every app the client uses before you quote. This is the single biggest source of post-launch surprise in headless work.

Checkout customisation limits without Shopify Plus. Shopify's standard plans give you very limited control over the checkout page. Headless or themed does not matter. If your brand needs custom upsell logic at checkout, custom payment flows, or a fully branded checkout experience, you need Shopify Plus and Checkout Extensibility. Budget for it. Around £2,300 per month for Plus is real money and it surprises brands who assumed headless meant checkout freedom. It does not.

Content management drift without a CMS layer. This is the slow-burn failure. The site launches. Six months later the marketing team wants to publish a new landing page, update the homepage hero, change the blog template, run a campaign. With nothing but Shopify's product and collection data, they cannot. They are blocked on the developer. So they ask for a CMS. If you did not build one in, retrofitting Sanity or Contentful at month six costs £3,000 to £8,000. Plan for this on day one.

Post-launch performance regression. Headless sites launch fast. Lighthouse 95+. Six months later they are at 60. Why? Marketing added a chat widget, a heatmap script, a Klaviyo popup, two retargeting pixels, a TikTok event tracker, and a survey tool. Every script adds 50 to 200ms. None of them came through the dev team. Without a maintainer paying attention to the third-party script budget, every headless build slowly degrades. This is what the Authority Retainer exists for and most brands underestimate it.

Shopify API rate limits at scale. If you are doing 10,000+ products, complex search, or high-traffic launches, the Storefront API has rate limits. You need caching, query optimisation, and possibly a search layer (Algolia, Typesense) to take pressure off Shopify. Hydrogen handles some of this for you. Next.js, you handle it. Neither is a problem on a 200-product DTC brand. Both are problems on a 5,000-SKU brand on launch day.

The decision framework

Five questions. Yes or no. Tally your answers.

1. Are you committed to staying on Shopify for the next five years? (Yes leans Hydrogen) 2. Do you have a strong, custom design vision that needs bespoke layouts and interactions? (Yes leans Next.js) 3. Will your site integrate with non-Shopify systems on day one (Sanity, Klaviyo, Algolia, configurator, custom backend)? (Yes leans Next.js) 4. Is your priority shipping fast and cheap over getting the exact design? (Yes leans Hydrogen) 5. Does your team have, or have access to, a developer or studio with deep React experience? (Yes leans Next.js)

If you answer Next.js on three or more, build on Next.js. If you answer Hydrogen on three or more, build on Hydrogen. If you split evenly, the brand is at a junction where either works and the deciding factor is who is building it and what they prefer to ship on.

Where Stocks Local sits

I work on both stacks. I default to Next.js because the brands I work with, premium DTC product brands, almost always answer Next.js on the framework questions. Strong design vision, integrations beyond Shopify on day one, optionality on platform. The 20 to 30 percent cost premium pays for itself in the first six months.

Standard Build is £8,000 to £12,000, four to six weeks, headless Shopify on Next.js or a Next.js standalone site. GEO and on-page SEO are baked in. Brand kit, launch creative, full design system.

If you are leaning Hydrogen and want a second opinion before you commit, send me what you have. I will tell you straight whether it is the right call for your brand.