Headless commerce is one of the most discussed topics in ecommerce development, and for Shopify stores specifically, the framework choice typically comes down to two options: Shopify's own Hydrogen framework, or Vercel's Next.js with a custom Shopify integration. Both are React-based, both can produce excellent results, and both have vocal advocates. But they serve somewhat different needs and come with different trade-offs.
This comparison is aimed at development teams and technical decision-makers evaluating these frameworks for a headless Shopify build. If you are a non-technical store owner wondering whether headless is right for you, the short answer is: probably not, unless you have specific requirements that Shopify's standard theme architecture cannot meet. The section on when headless makes sense addresses this directly.
Having built headless Shopify stores with both Hydrogen and Next.js, I can offer a practical perspective on the real-world differences, beyond what each framework's marketing materials claim.
What headless actually means
In a headless architecture, the frontend (what customers see and interact with) is decoupled from the backend (product data, orders, payments). Shopify's backend handles commerce logic — products, inventory, checkout, payments, and order management. The frontend is built as a separate application that communicates with Shopify through APIs, primarily the Storefront API.
The appeal is complete frontend freedom. You are not constrained by Shopify's Liquid templating language, theme architecture, or the performance characteristics of server-rendered Liquid pages. You can build any user experience using modern JavaScript frameworks, with granular control over rendering strategies, caching, and interaction patterns.
The cost is complexity. A headless architecture requires more development expertise, introduces additional infrastructure to manage, and breaks compatibility with many Shopify apps that rely on the standard theme. It is a genuine trade-off, not a universal upgrade.
Framework architectures
Shopify Hydrogen is built on Remix (now React Router v7). It is a React framework specifically designed for building custom Shopify storefronts. Hydrogen includes commerce-specific components (product forms, cart drawers, money formatting), hooks for interacting with the Storefront API, and a development experience tailored for Shopify merchants. Hydrogen deploys to Oxygen, Shopify's global edge hosting platform.
Next.js is a general-purpose React framework built by Vercel. It is the most popular React framework in the world, used for everything from marketing sites to SaaS products to ecommerce stores. Next.js is not Shopify-specific — it can work with any commerce backend or headless CMS. When used with Shopify, you typically integrate via the Storefront API using GraphQL queries and either custom hooks or community libraries.
The architectural difference is focus versus flexibility. Hydrogen is purpose-built for Shopify and includes commerce utilities out of the box. Next.js is general-purpose and requires you to build (or source) the Shopify integration layer yourself, but gives you a broader ecosystem and more transferable skills.
Shopify integration depth
Hydrogen's integration with Shopify is native and deep. The framework provides built-in support for the Storefront API, customer accounts API, and cart API. Commerce primitives like product forms with variant selection, cart management, and money formatting are included as pre-built components. The Shopify CLI scaffolds Hydrogen projects with a working store template connected to your Shopify data.
Next.js requires manual Shopify integration. You write GraphQL queries against the Storefront API, handle cart state management, build product selection UI, and manage checkout redirects yourself. Community templates like next-shopify-storefront provide starting points, but the integration is not as turnkey as Hydrogen's. This means more initial development work but also more control over exactly how data flows between your frontend and Shopify's backend.
For teams building exclusively for Shopify, Hydrogen's built-in commerce layer saves significant development time. For teams that might need to swap backends in the future — or that want to combine Shopify with other data sources — Next.js's backend-agnostic approach provides more architectural flexibility.
Developer experience
Hydrogen's developer experience is tightly coupled with Shopify. The CLI provides project scaffolding, local development with hot reload, and deployment to Oxygen. If you are familiar with Remix, Hydrogen feels natural — it is essentially Remix with Shopify-specific utilities. The documentation is Shopify-focused, and the learning resources are geared toward ecommerce use cases.
Next.js has a significantly larger developer ecosystem. More tutorials, courses, community components, and Stack Overflow answers exist for Next.js than for Hydrogen by a wide margin. The framework's general-purpose nature means skills are transferable to non-ecommerce projects. The App Router (introduced in Next.js 13) provides React Server Components, parallel routes, and intercepting routes that offer powerful UI patterns.
Hiring is a practical consideration. Finding developers with Next.js experience is substantially easier than finding developers with Hydrogen experience. A Remix/React Router developer can pick up Hydrogen relatively quickly, but the pool is still smaller than the Next.js talent market. For Shopify development teams, this availability difference matters.
Performance
Both frameworks can deliver excellent performance when properly implemented. The performance characteristics differ slightly due to their hosting and rendering architectures.
Hydrogen on Oxygen runs at the edge — server-side rendering happens on Cloudflare Workers distributed globally. This means fast Time to First Byte (TTFB) regardless of user location. Hydrogen's streaming SSR sends HTML to the browser progressively as data loads, improving perceived performance. The framework's built-in caching layer integrates with Shopify's CDN for static assets.
Next.js on Vercel also supports edge rendering, plus a broader range of rendering strategies — Static Site Generation (SSG), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), and client-side rendering. This flexibility allows you to choose the optimal rendering strategy per page. Product pages might use ISR for fast loads with periodic updates, while cart pages use SSR for real-time accuracy.
In practice, both frameworks achieve sub-second page loads and excellent Core Web Vitals scores when properly configured. The performance difference between them is marginal — implementation quality matters far more than framework choice. For guidance on performance metrics, see our article on Core Web Vitals for Shopify.
Hosting and deployment
Hydrogen is designed to deploy to Oxygen, Shopify's hosting platform built on Cloudflare Workers. Oxygen provides global edge deployment, automatic scaling, and integration with the Shopify admin. Oxygen is included with Shopify plans (with usage limits on higher tiers). You can also deploy Hydrogen to other hosting platforms like Vercel, Netlify, or Cloudflare Pages, though you lose some native integration benefits.
Next.js is designed for Vercel but deploys to virtually any platform — AWS, Cloudflare, Netlify, self-hosted, or Docker containers. Vercel's free tier is generous for development, and paid plans scale based on usage. The hosting flexibility is a genuine advantage for teams with existing infrastructure or specific hosting requirements.
Ecosystem and community
Next.js has one of the largest developer communities in the JavaScript ecosystem. Thousands of npm packages, component libraries, and integrations are designed for Next.js. The framework is used by major companies worldwide, and its ecosystem continues to grow rapidly.
Hydrogen's ecosystem is much smaller but growing. It benefits from Shopify's investment and the broader Remix community. Commerce-specific components and utilities are well-built and well-documented. However, for non-commerce functionality — authentication, CMS integration, analytics, etc. — you may find fewer ready-made solutions than in the Next.js ecosystem.
SEO considerations
Both frameworks support server-side rendering, which ensures search engines receive fully rendered HTML for indexing. Both generate clean, crawlable HTML output. Meta tags, canonical URLs, structured data, and sitemaps can be implemented on either framework. From an SEO perspective, neither framework has a meaningful advantage over the other when properly implemented.
The SEO risk with headless commerce is not framework-specific — it is the complexity of the migration. Moving from a Liquid theme to a headless frontend requires careful URL mapping, redirect management, and structured data migration. Poor execution can cause temporary ranking drops regardless of which framework you choose.
Costs comparison
Hydrogen on Oxygen is included with Shopify plans, making the hosting cost predictable and often lower than equivalent Next.js hosting on Vercel (where costs scale with traffic). However, the development cost for headless is significantly higher than a standard Shopify theme — typically two to four times more. For a breakdown of Shopify build costs, see our guide to what a Shopify store build should cost.
Next.js on Vercel's Pro plan starts at $20/month per team member, with usage-based pricing for bandwidth, serverless function execution, and edge requests. For high-traffic stores, Vercel costs can be substantial. Self-hosting Next.js on AWS or similar infrastructure reduces hosting costs but adds operational complexity.
Third-party app compatibility
This is an important practical consideration that is often underestimated. Many Shopify apps inject JavaScript, CSS, or Liquid into the standard theme. In a headless architecture, these theme-level integrations do not work. Apps that rely on the Storefront API, webhooks, or backend-only functionality typically work fine. Apps that modify the customer-facing experience — review widgets, upsell popups, loyalty programme displays — require custom frontend implementation.
Both Hydrogen and Next.js face this same limitation. The practical impact is that going headless often means rebuilding functionality that was previously handled by Shopify apps, adding to development scope and ongoing maintenance.
When headless makes sense
Headless commerce is not for everyone. It makes sense when you need a highly custom user experience that cannot be achieved with Shopify themes, when performance at scale is critical, when you are building a progressive web app or a multi-channel frontend, or when you have development resources capable of building and maintaining a custom frontend.
For most Shopify stores — even successful, high-revenue ones — a well-built Online Store 2.0 theme with custom theme development where needed provides an excellent customer experience at a fraction of the cost and complexity of going headless.
The verdict
Choose Hydrogen if:
- You are fully committed to Shopify as your commerce backend
- You want the tightest possible Shopify integration with built-in commerce primitives
- Your team is comfortable with Remix/React Router patterns
- You want Oxygen hosting included with your Shopify plan
- You value a purpose-built commerce framework over general-purpose flexibility
- Your project is purely ecommerce without complex non-commerce sections
Choose Next.js if:
- You need flexibility to integrate with multiple backends or CMS platforms
- Your team has existing Next.js expertise
- You want the largest possible ecosystem of tools, libraries, and community support
- You need diverse rendering strategies (SSG, ISR, SSR) per page
- You may need to switch commerce backends in the future
- Hiring Next.js developers is easier in your market
Both frameworks produce excellent headless Shopify stores. The choice is more about your team's expertise and strategic priorities than about one framework being objectively superior to the other. For a broader perspective on platform decisions, see our guide to the best ecommerce platform for UK brands.
If you are evaluating headless commerce for your Shopify store, get in touch. We will help you determine whether headless is the right approach and which framework suits your specific requirements.