Hydrogen vs Headless with Next.js vs Theme-Based Shopify: A Plain-English Comparison for Merchants
If an agency has proposed a headless build, you have probably heard Hydrogen or Next.js mentioned. This guide explains the three main frontend approaches to Shopify in plain English, with costs, trade-offs, and decision criteria that actually matter to a merchant.
Media Strategist
Last reviewed May 2026. If an agency has proposed a headless build, you have probably heard "Hydrogen" or "Next.js" thrown around in meetings. This guide explains the three main frontend approaches to Shopify — theme-based, Hydrogen (headless), and Next.js (headless) — in plain English, with the costs, trade-offs, and decision criteria that actually matter to a merchant, not a developer.
I want to make this simple. You do not need a computer science degree to make this decision. You need to understand three things: what each approach costs, who maintains it, and whether the benefits justify the price for your business.
Not sure which approach is right? Get matched with an agency that will give you an honest recommendation.
Get Matched FreeThe Three Approaches at a Glance
| Approach | What It Is | Build Cost | Monthly Maintenance | Best For |
|---|---|---|---|---|
| Theme-based | Shopify's native frontend using Liquid templates and the theme editor | $5,000–$40,000 | $500–$2,000/month | 90% of merchants |
| Hydrogen (headless) | Shopify's own React framework, hosted on Oxygen | $80,000–$200,000 | $3,000–$8,000/month | Merchants wanting headless within Shopify's ecosystem |
| Next.js (headless) | Independent React framework by Vercel, connected to Shopify via API | $80,000–$250,000 | $3,000–$10,000/month | Merchants wanting maximum flexibility and framework independence |
Theme-Based: The Default (and Usually the Right Choice)
Theme-based Shopify is what 90% of Shopify stores use. You pick a theme (free or premium), customize it in the theme editor, and it just works. Your marketing team can update content, rearrange sections, and create new pages without a developer.
How it works
- Your storefront is built with Liquid templates that Shopify hosts and serves
- The theme editor gives non-technical users visual control over layout and content
- 99% of Shopify apps work out of the box
- Performance is good by default — Shopify optimizes hosting and delivery automatically
Limitations
- Design is constrained by what the theme supports — truly custom layouts require Liquid development
- Page speed is limited by theme quality and app bloat
- Cannot power multiple frontends (mobile app, kiosk) from the same codebase
For most stores, these limitations are not real limitations. A well-customized premium theme with a few custom sections handles everything a $1M–$10M store needs.
Hydrogen: Shopify's Headless Framework
Hydrogen is Shopify's official React-based framework for building headless storefronts. It comes with Shopify-specific components, hooks, and utilities, and can be hosted on Shopify's Oxygen hosting platform.
How it works
- You build a custom React frontend using Hydrogen's components and hooks
- It connects to Shopify's Storefront API for product data, cart, and checkout
- Hosted on Oxygen (Shopify's hosting) or self-hosted elsewhere
- Shopify provides starter templates and documentation
Advantages over Next.js for Shopify merchants
- Built specifically for Shopify — less configuration needed
- Oxygen hosting is integrated into Shopify's admin
- Shopify-specific components handle common commerce patterns (product forms, cart, collections)
- Official support from Shopify's team
Limitations
- Newer framework with a smaller developer community than Next.js
- Ecosystem lock-in — Hydrogen is Shopify-specific, not portable to other commerce platforms
- Oxygen hosting has fewer deployment options than Vercel
- The developer talent pool for Hydrogen is smaller than for Next.js
Next.js: The Independent Route
Next.js is the most popular React framework in the world, maintained by Vercel. It is not built for Shopify specifically — it connects to Shopify via the Storefront API, the same as Hydrogen, but it is a general-purpose framework that can connect to any backend.
How it works
- You build a custom React frontend using Next.js
- It connects to Shopify's Storefront API for commerce functionality
- Typically hosted on Vercel, but can be hosted anywhere
- You write all commerce logic yourself or use community packages
Advantages over Hydrogen
- Largest developer community and talent pool of any React framework
- Framework independence — if you ever move away from Shopify, your frontend is portable
- More hosting options (Vercel, Netlify, AWS, self-hosted)
- More mature tooling, documentation, and third-party packages
Limitations
- No Shopify-specific tooling — you configure everything yourself
- More initial setup work to connect all Shopify commerce features
- No official Shopify support for your frontend — you rely on community resources
- Commerce-specific patterns (cart, checkout, product forms) need more custom code
Decision Framework
Here is the simplest way to decide. Answer these questions in order.
- 1.Can a premium theme with custom sections meet your design needs? If yes, go theme-based. Stop here. You will save $50,000–$200,000.
- 2.Do you need multiple frontends (web store, mobile app, in-store kiosk) powered by the same product data? If no, go theme-based. If yes, continue to question 3.
- 3.Do you want to stay within Shopify's ecosystem with official support? If yes, choose Hydrogen.
- 4.Do you want maximum framework flexibility and the largest developer talent pool? If yes, choose Next.js.
💡 Pro Tip
Ask your agency to build a proof-of-concept page in both theme-based and headless before committing. A 2-week spike costing $5,000–$10,000 can save you from a $200,000 mistake. If the theme-based version looks 90% as good, you have your answer.
Total Cost of Ownership: 3-Year Comparison
| Cost Component | Theme-Based | Hydrogen | Next.js |
|---|---|---|---|
| Initial build | $5,000–$40,000 | $80,000–$200,000 | $80,000–$250,000 |
| Annual maintenance | $6,000–$24,000 | $36,000–$96,000 | $36,000–$120,000 |
| Hosting (annual) | Included | $600–$6,000 | $600–$6,000 |
| 3-year total | $23,000–$112,000 | $188,600–$494,000 | $188,600–$616,000 |
The 3-year cost difference between theme-based and headless is roughly $150,000–$500,000. That is the ROI bar your headless build needs to clear in additional revenue, conversion improvements, or operational efficiency.
What to Ask Your Agency
- 1.Why are you recommending headless for our store specifically? (The answer should reference your business needs, not their preference.)
- 2.What is the total cost of ownership over 3 years — build, hosting, and maintenance?
- 3.How will our marketing team update content without filing a developer ticket?
- 4.Which of our current Shopify apps will and will not work with the headless approach?
- 5.Can you show us a theme-based alternative for comparison?
Browse verified headless Shopify agencies with proven portfolios.
Browse Headless AgenciesFrequently Asked Questions
Frequently Asked Questions
- What is the difference between Hydrogen and Next.js for Shopify?
- Hydrogen is Shopify's official headless framework, built specifically for Shopify with Shopify-specific components and Oxygen hosting. Next.js is a general-purpose React framework by Vercel that connects to Shopify via API. Hydrogen is more integrated; Next.js is more flexible and has a larger community.
- Is Hydrogen better than Next.js for Shopify?
- Neither is objectively better. Hydrogen is better if you want official Shopify support and Shopify-specific tooling. Next.js is better if you want the largest developer community, framework independence, and maximum hosting flexibility. Most agencies recommend Next.js due to the larger talent pool.
- Can I use a regular Shopify theme and switch to headless later?
- Yes. Starting with a theme and migrating to headless later is a common and sensible path. Your product data, customer accounts, and backend stay the same — you are only replacing the frontend. Start with a theme, prove your business model, and invest in headless when you have the revenue and team to support it.
- Do I need Shopify Plus for Hydrogen?
- Technically no — the Storefront API works on all plans. But Hydrogen projects almost always run on Shopify Plus because Plus provides higher API rate limits, Checkout Extensibility, and access to Oxygen hosting.
- How do I find a Shopify Hydrogen developer?
- The Hydrogen developer talent pool is smaller than Next.js. Look for agencies with Shopify Plus Partner status that list headless or Hydrogen in their portfolio. Our directory lets you filter by headless specialization to find agencies with proven experience.
The Bottom Line
For 90% of Shopify merchants, a well-customized theme is the right choice. It is faster to build, cheaper to maintain, and lets your marketing team move without developer bottlenecks. Headless (Hydrogen or Next.js) is the right choice for the 5–10% of merchants with genuine multi-frontend needs, extreme performance requirements, or design needs that truly exceed theme capabilities.
Do not let an agency talk you into headless because it sounds premium. Ask for the numbers, ask for the trade-offs, and ask for a theme-based comparison before you commit.
Not sure which approach is right? Get matched with an agency for an honest assessment.
Get Matched Free