Hydrogen vs Next.js for Shopify: Which Framework Should You Choose?

The context

Until 2022, building a headless Shopify store meant using Next.js (or Gatsby, or Remix) and wiring up the Storefront API yourself. It worked, but there was a lot of boilerplate and you were responsible for hosting, caching, and keeping up with API changes.

Then Shopify released Hydrogen: a React framework purpose-built for headless Shopify commerce. It ships with built-in Storefront API hooks, server-side rendering, streaming, and Oxygen (Shopify's edge hosting platform). Suddenly there was a Shopify-native option.

Both are good choices. The question is which one fits your project better.

Hydrogen: the Shopify-native path

What it does well

Hydrogen removes the boilerplate. Cart management, product queries, collection pages, search: the commerce primitives are built in. You're not writing Storefront API queries from scratch. You're using hooks and components that Shopify maintains and updates.

Oxygen hosting means your store runs on Shopify's global edge network. Deployment is a git push. SSL, CDN, and scaling are handled automatically. For teams that want to focus on the storefront experience rather than infrastructure, this is a significant advantage.

Hydrogen also ships with built-in support for Shopify's streaming architecture. Pages start rendering before all data has loaded, sending HTML to the browser progressively. For product pages with complex data requirements, this makes a measurable difference to perceived load time without requiring custom implementation.

Where it's limited

Hydrogen is a Shopify framework. If your project has significant non-commerce functionality: a complex blog with custom interactions, a member portal, a booking system, Hydrogen can feel constraining. It's optimised for commerce paths, and anything outside that requires more custom work than the same feature would in Next.js.

The ecosystem is also younger. Next.js has years of community plugins, patterns, and documentation. Hydrogen is catching up but the gap is real. If you run into an edge case, you're more likely to find a Stack Overflow answer for Next.js than for Hydrogen.

Oxygen hosting, while convenient, is also a lock-in decision. If you ever need to move off Shopify's infrastructure, you're rebuilding your hosting setup. For most brands this isn't a concern, but it's worth noting upfront.

Next.js: the flexible path

What it does well

Next.js is the most popular React framework for a reason. It handles routing, server-side rendering, static generation, API routes, and middleware out of the box. The ecosystem is massive. If your team already builds with Next.js, adding Shopify commerce to it is straightforward.

It's also platform-agnostic. Deploy to Vercel, Netlify, AWS, or your own infrastructure. If you ever need to swap Shopify for another commerce backend, your frontend isn't locked in. For brands that might outgrow Shopify Plus or need to integrate with non-Shopify commerce tools, this flexibility matters.

Next.js also has stronger support for complex application patterns outside pure ecommerce. If your storefront doubles as a web application with authenticated user flows, complex filtering, or significant server-side logic beyond product pages, Next.js gives you more to work with out of the box.

Where it's limited

You're doing more integration work upfront. Cart state management, Storefront API queries, checkout redirects: all of this needs to be built and maintained. Libraries like @shopify/hydrogen-react help, but it's still more wiring than Hydrogen gives you out of the box. On a typical Shopify Plus build, this adds meaningful development time in the early stages.

Hosting is also your decision. Vercel is the obvious choice and it works well, but it adds cost and another vendor relationship to manage. You can self-host on AWS or other infrastructure, but then you're responsible for CDN configuration, edge caching, and scaling, which is engineering time that doesn't go toward the storefront.

Next.js also doesn't have native Shopify streaming support in the same way Hydrogen does. You can implement streaming patterns, but it requires more deliberate architecture decisions rather than coming preconfigured.

Performance: how they actually compare

Performance is the question most teams ask first, and the answer is more nuanced than either framework's marketing suggests.

Both Hydrogen on Oxygen and Next.js on Vercel serve pages from edge nodes globally. Both support server-side rendering and static generation. Both can achieve excellent Core Web Vitals scores when built well. The framework itself is not the primary performance variable.

Where they differ is in the default performance posture. Hydrogen's streaming architecture means good performance is easier to achieve by default: pages render progressively, Suspense boundaries are built in, and Shopify's API responses are optimised for the framework. With Next.js, achieving equivalent streaming behaviour requires more deliberate implementation.

The real performance variables are JavaScript bundle size, image optimisation, how aggressively you cache Storefront API responses, and how efficiently your CMS queries are structured. A well-built Next.js store and a well-built Hydrogen store will have virtually identical performance scores. A store on either framework that loads unnecessary JavaScript or makes uncached API calls on every render will be slow regardless of framework choice.

If you're adding Algolia for search, the integration is clean on both frameworks. Algolia's InstantSearch library works well with Next.js and Hydrogen alike, and search performance is determined by your Algolia configuration more than your React framework.

Our recommendation

For pure Shopify Plus storefronts, which is most of what we build, Hydrogen is our default. The tighter Shopify integration, built-in commerce primitives, and Oxygen hosting mean we ship faster and maintain less custom code. It's a core part of why we built our default stack around Hydrogen, Sanity, and Algolia.

We reach for Next.js when the project has significant non-commerce requirements, when the client's team has deep Next.js experience they want to leverage, or when there's a strategic reason to stay platform-agnostic on hosting.

Either way, the framework is maybe 20% of the decision. The other 80% is the CMS choice, the integration architecture, the design system, and the engineering quality. If you're still deciding whether headless is the right path at all, read our guide on when a Shopify Plus store should go headless before committing to either framework.