Headless Shopify: Hydrogen vs. Next.js
Shopify's Storefront API opens the door to a fully custom frontend. The framework you build it on, Shopify's own Hydrogen or a general-purpose Next.js build, changes what you can do and how much you have to build yourself. We work in both and will tell you honestly which fits your store.
Shopify Plus Partner | Storefront API-First on Either Framework
Same Commerce Engine, Two Very Different Frontend Paths
Headless Shopify separates your storefront from Shopify's checkout and commerce engine, using the Storefront API to pull catalog, cart, and customer data into a frontend you control completely. Shopify still handles checkout, payments, and order management, but everything a customer sees before that point can be built on whatever frontend architecture actually fits your requirements.
The main decision is Hydrogen, Shopify's own React framework purpose-built for this, versus Next.js, a general-purpose framework with a larger ecosystem and more deployment flexibility. We build on both, and we'll walk you through which one actually fits your team before you commit.
Hydrogen (with Oxygen Hosting)
Shopify's own React-based framework, built specifically for Shopify storefronts and designed to pair with Oxygen, Shopify's edge hosting platform.
Built by Shopify, for Shopify
Commerce-specific React components and hooks pre-integrated with the Storefront API, reducing the custom integration work your team has to write.
Oxygen Hosting
Shopify's purpose-built edge hosting for Hydrogen storefronts, deployment and infrastructure handled as part of the Shopify ecosystem rather than a separate hosting decision.
Tight Platform Alignment
New Shopify Storefront API features and checkout capabilities tend to land in Hydrogen first, since Shopify builds and maintains it directly.
Best Fit When...
You want the most direct, officially supported path to headless Shopify, minimal custom integration overhead, and you're comfortable hosting on Oxygen rather than your own infrastructure.
Next.js for Shopify
A general-purpose, battle-tested React framework connected to Shopify via the Storefront API, without being tied to Shopify's own hosting or framework release cadence.
Deployment Flexibility
Host on Vercel, AWS, or wherever fits your existing infrastructure, rather than being tied to Oxygen specifically.
Larger Ecosystem
Broader compatibility with headless CMS platforms, component libraries, and tooling built for the general React and Next.js ecosystem, not just commerce-specific tools.
Multi-Platform Flexibility
A better fit if you're running a multi-brand or multi-platform setup where the frontend needs to talk to more than just Shopify.
Best Fit When...
You need hosting flexibility outside Shopify's ecosystem, you're integrating heavily with non-Shopify systems, or your team already has deep Next.js expertise from other projects.
We Build Production Experience on Both, on Purpose
So the recommendation isn't shaped by which framework we'd rather work in.
No Default Answer
A lot of headless Shopify pitches default to whichever framework the agency happens to prefer, regardless of fit. We don't default to one answer.
Real Tradeoffs, Not a Spec Sheet
If you want the most tightly integrated, officially supported path with minimal custom integration overhead, that's a real reason to choose Hydrogen. If you need deployment flexibility outside Shopify's ecosystem, that's a real reason to choose Next.js.
Clean Storefront API Underneath Either Choice
Regardless of frontend choice, we design the Storefront API integration, catalog, cart, checkout handoff, customer data, to be clean and well-documented.
Shopify Plus Partner Certified Delivery
Certified Shopify delivery whether you land on Hydrogen or Next.js, backed by direct experience shipping both in production.
How We Help You Actually Decide
A structured process from requirements assessment to documented handoff.
Requirements & Team Assessment
We evaluate your hosting preferences, integration complexity, and your team's existing framework expertise, since the right framework depends on who's maintaining it after launch.
Architecture Proof-of-Concept
For close calls, we can build a small proof-of-concept on the leading candidate framework against real pages from your catalog, so the decision is grounded in actual performance, not a spec sheet.
Storefront API & Data Layer Design
Regardless of frontend choice, we design the Storefront API integration, catalog, cart, checkout handoff, customer data, to be clean and well-documented underneath.
Frontend Build
We build the storefront on the chosen framework, optimized for Core Web Vitals and the specific customer experience your business needs.
Launch & Documented Handoff
We document the architecture and the reasoning behind the framework choice, so your team understands not just how it works, but why it was built this way.
We're Not Selling You Our Favorite Framework
A lot of headless Shopify pitches default to whichever framework the agency happens to prefer, regardless of fit. We build production experience on both Hydrogen and Next.js specifically so the recommendation isn't shaped by which one we'd rather work in. If you want the most tightly integrated, officially supported path with minimal custom integration overhead, that's a real reason to choose Hydrogen. If you need deployment flexibility outside Shopify's ecosystem or you're integrating heavily with non-Shopify systems, that's a real reason to choose Next.js. We'll walk through the actual tradeoffs rather than defaulting to one answer. This pairs directly with our Shopify retainer support once the storefront is live, and our UCP for Shopify work for stores getting their catalog and checkout ready for agent-driven commerce on the same headless foundation.
What This Delivers
The core commitments behind every headless Shopify build.
Frequently Asked Questions
Which is better, Hydrogen or Next.js, for headless Shopify?
Neither is universally better. Hydrogen gives you the most direct, officially supported path with Shopify-built components and Oxygen hosting included. Next.js gives you deployment flexibility and broader ecosystem compatibility, at the cost of more custom integration work. We'll recommend based on your specific hosting, integration, and team requirements.
Do we have to host on Oxygen if we use Hydrogen?
Oxygen is the purpose-built hosting for Hydrogen and the path Shopify optimizes for, but it's technically possible to host a Hydrogen build elsewhere with more configuration. We'll walk through this tradeoff specifically if it matters for your infrastructure requirements.
Does headless Shopify still use Shopify's checkout?
Yes, in most implementations. Checkout, payments, and order management stay on Shopify's infrastructure for security, compliance, and Shop Pay compatibility, while the browsing and cart experience leading up to it runs on your custom frontend.
How long does a headless Shopify build take?
A focused MVP typically runs 4 to 10 weeks depending on framework choice and catalog complexity. Hydrogen's pre-built commerce components can shorten the timeline versus a Next.js build with more custom integration work upfront.
Do we need Shopify Plus for a headless build?
Not strictly, the Storefront API is available on standard Shopify plans, but Shopify Plus unlocks checkout extensibility and additional customization that pairs well with a fully custom headless frontend. We'll confirm what's needed based on your specific requirements.
Not Sure Whether Hydrogen or Next.js Is Right for Your Shopify Rebuild?
SnapTec builds headless Shopify storefronts on both frameworks and will walk you through the real tradeoffs for your team, not just push whichever one we like building in.
Shopify Plus Partner | Storefront API-First on Either Framework