Shopify Hydrogen 2026-10: Now a Library for Next.js and Any Framework, Plus Vercel Shop and When Headless Is Worth It

Shopify Hydrogen is Shopify's toolkit for building a custom, headless storefront in JavaScript. Until this fall it was a framework built on React Router. Since Hydrogen 2026-10, released on October 14, 2026, it is a library you add to the framework you already use. Shopify's words: "Hydrogen now works with any JavaScript framework. You can bring Shopify's commerce to your stack just by adding the library to your app, instead of needing to replatform."1
This is part six, the last part, of our series on Shopify's Fall '26 Edition. The overview covers the whole release. Earlier parts covered AI shopping agents, the 2026-2027 developer deadlines, Shopify Protect before Black Friday and Canvas, the AI store builder. This article covers what changed in Hydrogen, what Vercel Shop is, what breaks when you upgrade, how developers are reacting, and how to make the headless call for 2027.
The short version
- Hydrogen is a library now, not a framework. It handles "the cart, variant selection, prices in the buyer's currency, analytics that respect consent, Shop Pay, and customer login," and you add it to your app.1
- Two official starters. React Router 7 deployed to Oxygen, and Vercel Shop, a Next.js 16 template deployed to Vercel.2
- Oxygen is "still free" on paid Shopify plans, and you can now host anywhere.14
- Existing stores do not have to move. "Existing Hydrogen storefronts keep working as they do now, and there's nothing you need to do today."1
- Upgrading is a real migration. The old Hydrogen CLI commands and Vite plugin are gone, several APIs are replaced, and early 2026.10 releases have open bugs.39
- The reaction is quiet and cautious. Agencies already on Next.js call it validation. Most others say headless is still more code to own.
What is Shopify Hydrogen now?
Shopify's migration guide puts it in one line: "Starting with version 2026-10, Hydrogen is a library that you add to your framework, instead of a framework of its own."3
The library covers the Storefront API and the Customer Account API. Shopify's docs say it works "with frameworks that run server code, like Next.js, React Router, Nuxt, Astro, and SvelteKit."2 It ships a core package plus React and Vue bindings. Frameworks without a packaged binding use the core directly.2
What it does not do matters as much. It "doesn't include checkout UI, because checkout stays on Shopify, or an Admin API client."2 Image components and SEO are now your app's job.
| Hydrogen before 2026-10 | Hydrogen 2026-10 | |
|---|---|---|
| What it is | A framework built on React Router (Remix before that) | A library you add to your framework |
| Frameworks | React Router only | Next.js, React Router, plus examples for Nuxt, Astro, SvelteKit, SolidStart |
| Official starters | React Router template on Oxygen | React Router 7 on Oxygen, Vercel Shop (Next.js 16) on Vercel |
| Hosting | Oxygen first, others possible | Oxygen, Vercel, Node, Cloudflare Workers, Deno or another runtime |
| Images, SEO, sitemaps | Built-in components and helpers | Your own components and queries |
| AI coding support | None packaged | 20 agent skills shipped in the project |
Sources: Shopify's docs, migration guide and deploy page.2320
The other examples are examples. Shopify's docs say the Astro, Nuxt, SolidStart and SvelteKit samples "aren't starter templates."2 If a blog tells you Hydrogen "supports Svelte" today, that is true for the core library. It is not a supported starter.
How do you start a new Hydrogen project?
Shopify's changelog gives one command, npx @shopify/hydrogen@latest setup, and then you ask your coding agent to "Set up my store with Shopify."1 For Next.js, Shopify's own advice is: "If you use Next.js, clone Vercel Shop."1
What is Vercel Shop?
Vercel Shop is Vercel's open source Next.js storefront template for Shopify, built on the new Hydrogen library. Vercel announced on October 16, 2026 that it "is generally available," and that "Vercel Shop is built on Shopify's Hydrogen SDK."5 Vercel's template page says it uses the "framework-agnostic Hydrogen SDK (not the Hydrogen React Router framework)."19
The split of work is clean. Hydrogen handles commerce: cart, prices, customer login, Shop Pay. Next.js owns routing, rendering, caching and metadata. Vercel's CEO Guillermo Rauch is quoted in the launch post saying it is "built on Shopify, and it's freaking fast."5 That is the vendor talking. No independent benchmark of Vercel Shop exists yet.
One gap stands out for content-heavy brands. A competing storefront vendor, Weaverse, reviewed it the week it launched and noted: "It has no CMS or visual editing."13 If your marketing team edits landing pages without a developer, plan for a headless CMS on top.
Shopify's Fall '26 Editions page sums up the pairing: "Build production-ready stores with Hydrogen, including customer accounts, predictive search, built-in agent skills, and one-click deploys to Vercel."6
Is Oxygen still free?
Yes, on paid plans. Shopify's GA post says you can "host it anywhere, including Oxygen, which is still free."1 Shopify's Hydrogen and Oxygen fundamentals page says "Oxygen is available at no extra charge on paid Shopify plans," and lists Starter, Basic, Grow, Advanced, Plus and Pause and build. It also says "Oxygen isn't available on Agentic plans."4 Development stores and trial plans can use Oxygen but do not get public environments.4
One caveat: that plan list sits on a page under Shopify's legacy Hydrogen docs. The 2026-10 Oxygen deploy page does not repeat it. We expect the policy holds, but check before you plan around it.
The bigger change is that Oxygen is now one option among several. Shopify's deploy docs list Oxygen, Vercel, and "Node, Cloudflare Workers, Deno, or another runtime."20 Free hosting no longer pulls you into a specific framework.
The 20 agent skills
Shopify says "Hydrogen comes with 20 skills that teach coding agents how to use it." The skills live inside your project, match the Hydrogen version you installed, and update with npx @shopify/hydrogen skills sync.1
The skills folder in Shopify's Hydrogen repository holds 20 entries today. They cover setup, the Storefront client, cart UI and cart drawer, cart metafields, variant forms, collections, predictive search, markets, money formatting, images, analytics, customer accounts, Shop Pay, routing, request handlers, Oxygen, local HTTPS, a smoke test, and a migration skill.8 The migration skill was added in 2026.10.1, the day before GA, and "guides an AI agent through the migration of a classic Hydrogen storefront (Remix or React Router) to Hydrogen 2026-10."8
In practice, a developer using Claude Code, Cursor or a similar tool gets documentation pinned to the exact version in the project. That reduces the classic AI mistake of writing code for an API that changed two releases ago. It does not replace a developer who knows what the cart should do.
Migrating an existing Hydrogen storefront
You do not have to migrate today. Shopify is clear on that, and it shipped a legacy 2026.4.8 release on October 21, after GA.18 Shopify has not announced an end-of-support date for the legacy line.
When you do move, the migration guide applies to storefronts on Hydrogen "2026.4.x or earlier, on Remix or React Router." Remix storefronts move to React Router 7 as part of it.3 The main changes:
- Node 22.12 or later, or 24. "Install Node.js version 22.12 or later, or version 24."3
- The Hydrogen CLI build tools are gone. "The shopify hydrogen dev and shopify hydrogen build commands, and the hydrogen() Vite plugin, aren't part of version 2026-10."3
- APIs are replaced.
context.storefront.query()becomesstorefrontClient.graphql(). The built-in image, money and pagination components become "Your own components." The sitemap helpers become "Your own sitemap queries."3 - Version pins matter. The guide says Hydrogen 2026-10 is tested with specific versions of React Router 7 and React 19, even though "Newer majors of some of these packages exist, like React Router 8."3
The upgrade trap to check today
If your package.json lists Hydrogen as ^2026.4.0, a fresh install could resolve to 2026.10 and break your build. Shopify's own changelog for 2026.10.2 says projects on 2026.4 "whose ^2026.4.0 range resolved to 2026.10 previously failed at ESM link time." The fix it points to is the ~2026.4.0 pin.8 Check your lockfile and pin before your next deploy, especially before Black Friday.
Known issues on 2026.10
Early releases still have rough edges. These were open on GitHub when we checked on November 2, 2026:
- On Oxygen, Hydrogen 2026.10.2 crashes Storefront API requests because "Oxygen's runtime does not expose
getSetCookie, so every Storefront API request throws." The issue was opened on October 29 and a fix PR is open.9 - Stores on classic Hydrogen asked how to get a patched React Router without migrating. The only reply, from a community member rather than Shopify, was: "unless Shopify ships a 2026.4.x bump, the migration is the supported way to get onto a patched Router."10
If you run Hydrogen on Oxygen, hold on 2026.10.2 until the getSetCookie fix ships, or test thoroughly in a preview environment first.
How developers are reacting
The launch was quiet. One developer found it on GitHub before any announcement: "Didn't see any announcement about this, but seems like the new hydrogen now is live?"11 Shopify's forum thread for the release had no replies from outside Shopify when we checked.7 Most public commentary so far comes from agencies and vendors, so read it with that in mind.
Shopify frames it as a small change with a big effect. A Shopify staff member wrote: "The big deal about the new Hydrogen is that it isn't a big deal: Hydrogen now works with any JavaScript framework." Another said: "We've heard from many of you over the past few years about wanting to bring your own JavaScript framework."7
Developers who wanted framework freedom like it.
- "I love the new direction for Hydrogen, makes perfect sense in this agentic world," wrote one developer during the preview.11
- Karve Digital, a headless Shopify agency, said the rebuild "validates the way we have been building headless Shopify storefronts for over a year," and that "The rebuild dissolves that trade-off" between Next.js and Hydrogen.17
- Domaine, a Shopify partner agency: "That's a real improvement, and it's worth taking seriously."18
- Dev Partners, a UK agency, on businesses already running a JavaScript app: "For some businesses this quietly removes one of the main reasons not to sell through Shopify at all."14
The cautious majority says headless is still headless.
- Contra Collective: "Framework agnostic Hydrogen is not a free lunch."15
- Weaverse: "It does not magically turn bad headless bets into good ones."16
- Dev Partners: "Headless means more code, and more code means more to look after."14
Hosting is now a real debate. Contra Collective's advice is "Default to Hydrogen on Oxygen unless you have a concrete reason not to."15 Dev Partners points the other way for teams with an existing app: "Oxygen is free, but if your existing app already lives somewhere else, keeping it all in one place may be simpler."14 Developers using frameworks beyond the starters have hit Oxygen runtime limits. One wrote that some frameworks "either can't deploy to Oxygen or need unofficial workarounds, like needing to alias framework internals," though they later found a configuration that fixed their case.12
Next.js developers now have a clear default. Weaverse summed up the shift for its own product planning: "Shopify now points every Next.js developer to Vercel Shop."13 Its blog advice to Next.js teams: "keep Next.js, stop hand-rolling Shopify commerce."16
Reddit and X were not reachable for our research, and we found no Hacker News thread about the release. If merchant reaction appears there, it had not surfaced in the places we could read by November 2.
Hydrogen vs Next.js in 2027: the question changed
In April we compared Hydrogen vs Next.js as two separate paths. That framing is now out of date. Vercel Shop is Next.js with Hydrogen inside it. The real choices are:
| Your situation | Sensible default |
|---|---|
| New headless build, no existing app | React Router starter on Oxygen. Free hosting, Shopify's own path. |
| Your team or company already runs Next.js | Vercel Shop, or add Hydrogen to your Next.js app. |
| Existing Hydrogen store on 2026.4 or earlier | Pin ~2026.4.0, stay put through peak season, plan the migration for 2027. |
| Existing Next.js store with a hand-rolled Storefront API layer | Replace the hand-rolled cart and customer login with Hydrogen when you next touch them. |
| Store on a Liquid theme that works | Stay on Liquid. Nothing in this release changes that. |
The last row matters most. Our headless Shopify guide set out who headless is for: brands where content, performance and commerce needs genuinely outgrow a theme. That test still applies. Hydrogen 2026-10 makes headless cheaper to wire up. It does not make a custom frontend cheaper to own, test, and keep working with every app you install. Our headless Shopify cost breakdown walks through where that money goes.
The other half of the Fall '26 story points the same way. Shopify is putting serious work into Canvas and a new Liquid theme architecture, and into AI shopping agents that work on Liquid and Hydrogen storefronts alike. Going headless is no longer the only way to get a modern, agent-ready store.
What to do
- If you run Hydrogen today, check your Hydrogen version range. Pin
~2026.4.0if you are not ready to migrate. - If you are on Oxygen, avoid 2026.10.2 until the
getSetCookiefix ships. - Plan migration after peak season. Shopify says nothing is required today, and the migration touches build tools, data fetching and components.
- If you run Next.js, look at Vercel Shop's cart and customer account code before writing your own.
- If you are on Liquid, do not go headless because of this release. Go headless when your content, performance or integration needs genuinely require it.
- Budget for a CMS if you choose Vercel Shop and your marketing team needs to edit pages themselves.
If you want help deciding whether headless still makes sense for your store, or migrating an existing Hydrogen storefront to 2026-10 safely, our Shopify development team can review your setup and give you a scoped plan within 48 hours.
The full Fall '26 Edition series
- Part 1: Shopify Editions Fall 2026: everything new and what it means
- Part 2: AI shopping agents on Shopify: how Shop.md and Shop Pay let AI buy from your store
- Part 3: Shopify deadlines 2026-2027: script tags, app tokens and the changes that will break stores
- Part 4: Shopify Protect in 2026: what it covers today, what is still coming, and your Black Friday fraud setup
- Part 5: Shopify Canvas: the AI store builder, what it can't do yet, and what the new theme architecture means
- Part 6: Shopify Hydrogen 2026-10, Next.js and Vercel Shop (this article)
Frequently asked questions
What is Shopify Hydrogen?
Shopify Hydrogen is Shopify's JavaScript library for building custom headless storefronts. Since version 2026-10, released October 14, 2026, it is a library you add to a framework like Next.js or React Router, handling the cart, prices, Shop Pay, analytics and customer login. Checkout stays on Shopify.
Does Shopify Hydrogen work with Next.js?
Yes. Hydrogen 2026-10 works with Next.js, and Shopify recommends Vercel Shop, an open source Next.js 16 template built on Hydrogen and maintained by Vercel, as the Next.js starting point.
What is Vercel Shop?
Vercel Shop is Vercel's open source Next.js storefront template for Shopify, built on the Hydrogen library. Vercel announced it as generally available on October 16, 2026. It deploys to Vercel and does not include a CMS or visual editor.
Is Shopify Oxygen hosting still free?
Yes. Shopify says Oxygen "is still free," and its docs say Oxygen is available at no extra charge on paid Shopify plans. It is not available on Agentic plans. You can also host Hydrogen on Vercel, Node, Cloudflare Workers, Deno or another runtime.
Do I have to migrate my existing Hydrogen store?
Not today. Shopify says existing Hydrogen storefronts keep working and there is nothing you need to do now, and it still ships fixes to the legacy 2026.4 line. Pin your Hydrogen version to ~2026.4.0 so an install does not pull in 2026.10 by accident.
What breaks when upgrading to Hydrogen 2026-10?
The Hydrogen CLI dev and build commands and the hydrogen() Vite plugin are removed, Node 22.12 or later is required, and several APIs change, including the Storefront query client and the built-in image, money, pagination and sitemap helpers, which become your own code. Shopify publishes a migration guide and an AI agent skill for the move.
Is Hydrogen or Next.js better for Shopify in 2027?
It is no longer either-or. Next.js teams can use Hydrogen inside Next.js through Vercel Shop. Teams starting fresh with no existing app can use the React Router starter on free Oxygen hosting. The bigger question is whether you need headless at all, and for most stores a Liquid theme is still the better choice.
What are Hydrogen agent skills?
They are 20 instruction packs that ship inside a Hydrogen project and teach AI coding agents how to use that exact Hydrogen version, covering setup, cart, markets, customer accounts, Shop Pay, Oxygen and migration. You update them with npx @shopify/hydrogen skills sync.
- Shopify developer changelog, "Hydrogen 2026-10 is now available," October 14, 2026. shopify.dev
- Shopify developer documentation, "Hydrogen" (version 2026-10). shopify.dev
- Shopify developer documentation, "Migrate from legacy Hydrogen." shopify.dev
- Shopify developer documentation, "Hydrogen and Oxygen fundamentals" (legacy Hydrogen docs). shopify.dev
- Boris Besemer, Dan Laugharn and Kevin Sundstrom, "Vercel and Shopify make agents first-class shoppers," Vercel, October 16, 2026. vercel.com
- Shopify, "Shopify Editions | Fall '26," Headless section, October 28, 2026. shopify.com
- Shopify Developer Community, "Hydrogen 2026-10 now available," October 14, 2026. community.shopify.dev
- Shopify, Hydrogen repository, packages/hydrogen CHANGELOG and skills folder, GitHub; release dates from the npm registry. github.com
- GitHub issue #4281, "Headers.getSetCookie is not a function on Oxygen: hydrogen 2026.10.2 captureSubrequestHeaders crashes every Storefront API request," October 29, 2026. github.com
- GitHub discussion #4200, "Supported classic Hydrogen dependency path for React Router GHSA-chx6-hx7r-mcp5," October 17, 2026. github.com
- GitHub discussion #3876, "Hydrogen Preview Roadmap," July 20 to October 12, 2026. github.com
- GitHub discussion #4054, "Add support for AsyncLocalStorage (nodejs_als) on Oxygen," September 22 and 23, 2026. github.com
- Weaverse, "Review Vercel Shop and its impact on Forward," GitHub issue #96, October 12, 2026. github.com
- Rob Sherwood, "Shopify Hydrogen Is Now a Library. What That Means for You," Dev Partners, October 15, 2026. devpartners.co.uk
- Contra Collective, "Framework Agnostic Hydrogen: Shopify's Runtime Rebuild for Headless Plus (2026)," August 22, 2026. contracollective.com
- Paul Phan, "Shopify Just Rebuilt Hydrogen For Agents, Not Framework Loyalists," Weaverse, updated October 12, 2026. weaverse.io
- Oybek Khalikovic, "Vercel Ship 2026: Shopify's Hydrogen goes runtime-agnostic," Karve Digital, July 9, 2026. karvedigital.com
- Max Rolon and Jineane Ali, "Understanding Shopify + Vercel rebuilding Hydrogen," Domaine, July 9, 2026. domaineworldwide.com
- Vercel, "Vercel Shop" template page. vercel.com
- Shopify developer documentation, "About deploying Hydrogen storefronts." shopify.dev
Docs, changelogs, GitHub threads and agency posts read on November 2, 2026. Hydrogen ships frequently, so check Shopify's changelog for the current version and open issues.
Building or fixing a Shopify store?
Tell us what you are working with. You get a scoped plan and a straight answer on whether you need a rebuild or just a fix.
- New builds, replatforms, and migrations
- Speed, checkout, and conversion fixes
- Scoped estimate within 48 hours
Working on something in Shopify & Ecommerce?
Tell us what you are working on. You get a scoped estimate within 48 hours.

