The 30-second answer
- Greenfield build, team new to headless Shopify: Hydrogen. The templates give you a working store in days, not weeks.
- Team already runs Next.js elsewhere: custom Next.js. Learning Remix/React Router for one project rarely pays off.
- Multi-source content (CMS + Shopify combined): custom Next.js — Hydrogen has no opinion here, but Next.js's App Router data-fetching model handles mixed sources more naturally.
- Don't want to hand-wire caching, auth, and webhooks yourself: either framework, plus a bridge layer — see the last section.
1. What each one actually is
Hydrogen is Shopify's own React framework, built on Remix (now React Router 7), pre-wired to the Storefront API with cache directives, cart primitives, and starter templates. A custom Next.js storefront is exactly what it sounds like — a plain Next.js app making its own GraphQL calls to the same public Storefront API Hydrogen uses under the hood. Neither is "more headless" than the other; both are two different framework choices sitting on top of the identical data layer.
2. Setup time and starting point
| Task | Hydrogen | Custom Next.js |
|---|---|---|
| Project scaffold | Included (Shopify CLI) | create-next-app + manual wiring |
| Product/cart/collection components | Starter templates ship them | Build from scratch or use Next.js Commerce as a base |
| Caching strategy | CacheLong/CacheShort directives built in | Configure fetch revalidate yourself |
| Deployment target | Oxygen (free, one command) or Vercel/Netlify/CF | Vercel/Netlify/self-hosted |
| Typical time to first working storefront | 2–4 weeks | 4–8 weeks |
The gap is real but it's front-loaded — Hydrogen wins on week one. It narrows fast once the store needs anything outside Hydrogen's opinions (a second content source, a non-standard cart flow), where the "custom" in custom Next.js stops being a cost and starts being the point.
3. Developer sentiment — what actually gets complained about
Hydrogen sits around 3.5★ in Shopify's own app listing, and the Shopify community forum and Hydrogen's GitHub issues surface a consistent set of complaints: a CLI that's confusing for developers new to Remix-based tooling, deployments that fail on minor misconfiguration, no standard index.html entry point (a Remix convention that trips up plain-React developers), and friction on version upgrades between Hydrogen releases. None of this makes Hydrogen a bad choice — it means the "it just works" pitch has real edges once you're past the happy path.
A custom Next.js storefront doesn't have Hydrogen-specific complaints because it doesn't have Hydrogen-specific opinions — but that also means every one of the problems above (caching, cart edge cases, auth) is now yours to solve rather than Shopify's team's.
4. Hosting cost
| Deployment | Monthly cost | Notes |
|---|---|---|
| Hydrogen on Oxygen | $0 | Free, Shopify-managed edge runtime |
| Hydrogen on Vercel/Netlify | $20–$200 | Traffic-dependent, same as any Remix app |
| Custom Next.js on Vercel | $20–$200 | Same tier structure as any Next.js app |
Oxygen is the only meaningful cost difference — free hosting is a real reason teams pick Hydrogen for greenfield builds with tight budgets. Off Oxygen, the two options cost the same.
5. Where a bridge layer changes the calculus
The honest version of this comparison is that most of Hydrogen's advantage is really "someone already wired the boring parts for you" — caching, cart mutations normalized, webhook-driven cache invalidation. If you're choosing custom Next.js for the framework flexibility but don't want to rebuild that wiring from scratch, a bridge layer like Trama gives you the same normalized product/cart/checkout hooks Hydrogen ships, on top of plain Next.js — and the identical hooks work unmodified if you ever add a second platform (Wix, Webflow) alongside Shopify, which Hydrogen has no story for at all.
npm install trama-sdk
// Works the same whether you're on Next.js, Hydrogen (via a client
// component), Astro, or SvelteKit — the SDK doesn't care.
import { useProducts, useCart } from 'trama-sdk';
export default function Store() {
const { products } = useProducts({ limit: 24 });
const { addItem, goToCheckout } = useCart();
// ...render exactly like a hand-wired Storefront API call, minus the wiring
}6. Decision rule
Q1: Is your team already fluent in Next.js / App Router?
If yes → custom Next.js. Learning Remix conventions for one project rarely pays for itself.
Q2: Greenfield, no strong framework preference, want to ship fast?
If yes → Hydrogen. The templates get you further, faster, on day one.
Q3: Combining Shopify with another CMS, or planning a second commerce platform later?
If yes → custom Next.js with a bridge layer. Neither Hydrogen nor a hand-wired Storefront API integration has a clean story for multi-source data.
7. Frequently asked questions
Is Shopify Hydrogen actually headless?
Yes, technically — Hydrogen is a React (Remix/React Router) framework that talks to the Storefront API, the same public GraphQL API a custom Next.js app would use. The debate isn't whether it's headless, it's how much Shopify-specific opinion you want baked into your framework versus building on a general-purpose one like Next.js.
Is Hydrogen faster than Next.js for a Shopify storefront?
Roughly equal once both are properly tuned. Hydrogen ships pre-built cache directives (CacheLong, CacheShort) suited to Shopify data; Next.js needs you to configure revalidate/fetch caching yourself. Neither has an inherent runtime speed advantage — the gap is in setup effort, not final performance.
What is a good Shopify Hydrogen alternative?
A custom Next.js (or Astro, SvelteKit) app calling the Storefront API directly is the most common alternative — full framework flexibility, no Remix/React Router lock-in, and it fits teams that already run Next.js elsewhere. The trade-off is you take on the caching, auth, and webhook wiring Hydrogen gives you for free.
Do I have to deploy Hydrogen on Shopify Oxygen?
No. Hydrogen is open-source (MIT) and deploys to Vercel, Netlify, or Cloudflare Workers in addition to Shopify's own Oxygen runtime. Oxygen is free and tightly integrated, which is why most Hydrogen projects default to it, but it isn't mandatory.
Why do some developers dislike Shopify Hydrogen?
Common complaints in Shopify community threads and GitHub issues center on the CLI being confusing for newcomers, deployment failures on minor misconfigurations, no standard index.html entry point (a Remix-ism that trips up developers used to plain React), and version-upgrade pain between Hydrogen releases. None of these are fatal, but they add real onboarding friction versus a plain Next.js app.
Does a custom Next.js Shopify storefront need Shopify Plus?
No — the Storefront API and a custom Next.js frontend work on every Shopify plan starting at Basic ($29/mo). Shopify Plus is only required for Checkout Extensibility (custom checkout UI), not for a headless storefront itself.
Skip the wiring, keep the framework choice.
Paste your Shopify store URL on the homepage. See your products rendered through a plain Next.js frontend, with caching and cart logic already wired — no Hydrogen, no boilerplate.