Hydrogen gets a ground-up rebuild
Shopify and Vercel are rebuilding Hydrogen, the headless storefront framework, from scratch. The new version is open source and runtime agnostic, so it runs anywhere JavaScript does. Developers can use it with Svelte, Nuxt, Next.js, or a custom framework of their own.
The architecture splits into three layers: core, client, and server.
Core utilities
The core layer consolidates JavaScript that developers historically wrote themselves against the Shopify API. Instead of scattered, bespoke glue code, it now lives in one shared place.
A good example is formatMoney. The open web already handles number formatting with Intl.NumberFormat. The complication is that the Shopify API doesn't return a plain number; it returns a custom type, MoneyV2, where the amount is a signed decimal serialized as a string.
With the core centralized, you get the same result without writing or maintaining the conversion layer yourself. When the API changes, upgrading is trivial. Bugs get fixed once and shipped to everyone, freeing developers to focus on the rest of the build.
Client-side state
Rendering what the core returns involves a set of repeated decisions, and cart state is the most obvious one. Developers who have built a commerce app have written their own custom cart management code—different implementations every time, all chasing the same behaviors.
In the rebuilt Hydrogen, the client layer handles the cart. Managing its state becomes a single import rather than a custom implementation. Best practices are baked in, so you invest your time in what's unique to your storefront. The client layer is available for React today on the Hydrogen preview branch, with more framework support planned.
Server-side strategy
Storefronts that scale need full-stack access without sacrificing performance. Static content should be served instantly from a CDN while dynamic data like inventory streams in. The open-source ecosystem solved this with full-stack frameworks like Next.js, Nuxt, and SvelteKit—capabilities with no proprietary runtime lock-in.
For example, suppose a storefront caches product queries with on-demand revalidation. You write the GraphQL query. Hydrogen provides a type-safe client, and Next.js handles the caching. You get the full-stack framework plus the headless Shopify API without the boilerplate bindings.
Shopify already supports these frameworks through its Headless sales channel—but each framework had its own bindings to the same API contract. At the server layer, the fix is guidance rather than more code. Both humans and AI agents need to know how to use what frameworks already do, instead of reinventing it for Shopify. That guidance ships as documentation, templates, and skills.
Relation to vercel.shop
Before this rebuild, Vercel built vercel.shop, a template for agentic commerce that made headless storefronts on Next.js and Shopify easier. The lessons from that project are now being folded into Hydrogen's client and server layers. Once Hydrogen stabilizes, vercel.shop will adopt it and serve as a reference for building storefronts with Hydrogen and Next.js.
Development in the open
The project is being developed publicly. Developers can follow along on GitHub: try it, fork it, and contribute to what comes next.
