Hydrogen vs. Next.js: How to Choose a Shopify Headless Stack

Until early 2023 (when Hydrogen v2 was introduced), Next.js was the most practical way to build headless storefronts on Shopify. It had a strong ecosystem, wide developer adoption, and solid support resources. It stood out among frontend frameworks for its maturity.

Next.js enables the development of high-performing, SEO-friendly server applications. The biggest advantage lies in how elegantly it abstracts complexity through simple APIs.

Moreover, Next.js is tightly coupled with Vercel, the company behind it, and a cloud platform for building, deploying, and scaling modern web applications. As Next.js simplifies building server-side applications, Vercel simplifies deployment and hosting. Frontend teams can ship globally distributed, cached storefronts without a dedicated DevOps team, often lowering TCO compared to self-managed stacks.

However, Vercel-hosted Next.js storefronts live outside Shopify’s managed environment. This alone adds inherited complexity to Next.js-based storefronts. It increases operational risk by tying the setup to a company whose core business is cloud-based services. This isn’t inherently bad, but hosting outside Shopify shifts responsibility from the platform to the merchant, potentially increasing TCO.

Two ecosystem shifts illustrate this:

1. App Router (mid-2023). Next.js introduced a new architecture that changed routing, data-fetching, and caching.
   1. Essentially, it can be harder to host App Router builds outside Vercel due to tighter coupling with its runtime.
   2. For mostly presentational storefronts, App Router adds concepts and moving parts versus the older Pages Router, arguably increasing complexity.
   3. Early rollout issues, like doc gaps and caching quirks, made content updates frustrating and undermined trust. However, those early issues were resolved quite promptly.
2. Vercel pricing update (April 2024). Vercel introduced “improved infrastructure pricing”, which replaced broader bundled metrics (bandwidth and functions) with more granular billing metrics (e.g., separate charges for ISR reads, ISR writes, Fast Origin Transfer, etc.) and claimed that for most users, bills would stay the same or drop. But for some usage patterns, such as heavy ISR, many reads/writes, or cross-region traffic, this granular model could lead to higher costs, especially since previously some of these costs were hidden or amortized. This is precisely what we observed for our clients with sudden, significant cost increases.
   
   In February 2025, Vercel announced optimizations: automatic compression of ISR cache entries and regional alignment of ISR cache to the function region. This was claimed to enable up to ~65% savings on ISR reads and writes. However, our clients haven’t seen the full savings; their bills remain significantly higher than before April 2024.

These shifts aren’t deal-breakers (and can be mitigated) but must be treated as operational trade-offs that come with adopting an external ecosystem.

When comparing Hydrogen and Next.js, include these factors in your TCO and risk analysis.

Hydrogen is Shopify’s headless framework. It ships with eCommerce utilities like cart operations, storefront analytics hooks, internationalization helpers, and product option handling, all tightly integrated with Shopify’s APIs. These primitives accelerate common tasks, and if you need more control, you can replace them with custom implementations.

Hydrogen pairs with Oxygen, Shopify’s hosting platform for Hydrogen apps. Oxygen provides environment management, preview URLs, and a modern CI/CD pipeline for global, edge-distributed deployments. It’s similar to Vercel but explicitly built for Hydrogen.

Oxygen runs on Cloudflare’s proven worker infrastructure, ensuring reliable scaling, performance, and edge distribution. It’s built for high-traffic sites and sudden spikes, like Black Friday. We witnessed this firsthand during the launch of the Lady Gaga site, which drew hundreds of thousands of visits on day one.

Hydrogen is built on an established framework – React Router (formerly known as Remix) –, which was a smart move by Shopify. It made adoption easier for developers and built trust in Hydrogen as a solution capable of handling demanding storefronts right from the early days.

The tight coupling with Shopify is both Hydrogen's weakest and strongest point. While Hydrogen can run outside Oxygen, some features and defaults assume the Shopify platform and may require additional configuration when self-hosting – something to factor into risk analysis.

That being said, let’s make it blatantly obvious:

Hydrogen is getting traction and for good reasons. When Shopify is your primary system, Hydrogen is typically the most pragmatic headless commerce path. Coupled with Oxygen, it reduces external infrastructure dependencies, lowers costs, and, in return, ultimately decreases TCO.

Choose Hydrogen when…

• Shopify is your primary source of truth.
• You want fewer moving parts and faster delivery.
• You prefer managed hosting with minimal infrastructure overhead.
• You focus on TCO and lowering operational complexity.

Choose Next.js when…

• You need general-purpose React beyond Shopify.
• Your roadmap spans multiple platforms, or you’re invested in that ecosystem.
• You need a cloud platform with more control over and additional services (i.e., databases, servers, storage)
• You prioritize flexibility and want less dependence on Shopify.

You run a global operation where the Shopify store is one of many apps in a shared monorepo. Teams ship in multiple languages/frameworks and already use Next.js on other projects.

Recommendation: Favor Next.js (often on Vercel) for the storefront to keep one deployment model, one CI/CD path, and shared patterns (routing, logging, observability). Vercel can host heterogeneous apps under a unified workflow, which reduces coordination costs across teams.

Caveats: Oxygen is optimized for Hydrogen-first repos and a simpler project shape. You can still use Hydrogen here, but you’ll likely need a separate repo or custom CI to deploy to Oxygen. That adds development work and dilutes the monorepo benefits.

When Hydrogen still makes sense: If Shopify is the clear system of record and you’re willing to split the store into its own repo, Hydrogen + Oxygen can lower long-term ops for the storefront. Just know you’re accepting a two-track deployment story.

You operate a single, Shopify-first store with heavy baseline traffic and dramatic peaks (e.g., Black Friday/Cyber Monday). You aggregate data from multiple sources, but Shopify remains the primary system

Recommendation: Favor Hydrogen + Oxygen. Hydrogen’s Shopify-native utilities (cart, product options, i18n, analytics hooks) reduce the need for custom development, while Oxygen provides scalable global edge hosting. This eliminates a separate hosting bill and trims operational overhead.

When Next.js might still fit: If you require a unified platform for multiple non-Shopify apps, or your org standardizes on Vercel features (e.g., org-wide observability), Next.js keeps your deployment model consistent – just account for additional vendors and potential hosting costs in TCO.

You run a hybrid business: ~20% DTC and ~80% B2B. Your customer portal pulls from external systems, and you expose proprietary APIs for onboarding and account management.

Recommendation: Hydrogen + Oxygen. Hydrogen can integrate proprietary or third-party data just as capably as a Next.js stack, while its Shopify-native utilities (cart, pricing, i18n) and Oxygen hosting simplify ops. You keep one platform of record (Shopify), reduce vendor sprawl, and avoid a separate hosting bill in many plans, improving TCO for a portal that’s traffic-spiky and auth-heavy.

Why it fits B2B:

• Works cleanly with Shopify B2B objects (companies, catalogs, price lists, payment terms) and Admin/Storefront APIs.
• Oxygen’s edge runtime helps with global buyers and bursty ordering windows.

When Next.js might still win: If your org standardizes on a single framework for all portals/dashboards (e.g., an internal platform team on Vercel/Next.js) and you need tight observability parity across apps, Next.js can reduce cross-team friction.

You operate a Shopify storefront with demanding editorial needs. Think: long-form content, rich media landing pages, and you manage content in an external CMS (e.g., Sanity, Contentful) alongside Shopify.

Recommendation: Hydrogen + Oxygen. Hydrogen is more than capable of composing Shopify data with CMS content, and you benefit from the same agility as in other scenarios. You keep Shopify as the commerce source of truth while your CMS drives editorial (portable content, preview drafts, scheduled publishing).

You run a Shopify DTC storefront, but you also maintain custom databases and backend services that are core to operations (pricing, availability, personalization, or fulfillment logic). You’d like to consolidate infrastructure and streamline operations.

Recommendation: Favor Next.js on a unified platform such as Vercel (or your preferred cloud). You can co-locate the storefront, APIs (serverless/functions), and supporting services (queues, schedulers, DBs) under one control panel. This keeps observability, CI/CD, secrets, and access policies consistent across the entire stack.

When Hydrogen still makes sense: If Shopify is clearly the primary system and your custom services are lightweight (or already hosted elsewhere), Hydrogen + Oxygen can still lower storefront ops. You’d keep the custom services on your existing cloud and accept a two-vendor model.

For most Shopify-first brands, Hydrogen + Oxygen is the pragmatic path to headless: you keep commerce on the platform that’s already your primary system, reduce external infrastructure, and ship faster thanks to Shopify-native utilities.

Next.js remains a strong choice when you need a general-purpose framework across multiple non-Shopify apps, or when you’re consolidating storefronts, services, and data pipelines under a single cloud control panel. In practice, performance and framework capabilities are rarely the decider; the tie-breaker is operational complexity and TCO.