- Homepage
- Shopify Hydrogen or Next.js
Shopify Hydrogen or Next.js: Which route fits your store?
Hydrogen or Next.js is not a ranking question, but a question of situation, team and cost
The question shifts in 2026: Since 17 June 2026, Hydrogen has been available as a developer preview whose building blocks are no longer tied to React Router and are meant for many JavaScript frameworks, including Next.js. According to Shopify, the current Hydrogen remains the fully supported route. Which route fits you is decided by the skills in your team, your content model, your markets and operations after go-live, not by how popular a framework is.
This page shows what has changed, what stays with Shopify and what you build yourself, when a theme is still enough, how the costs add up over three years and how you can tell where your situation leans. Status: 13 October 2026.
Routes for a custom frontend at a glance: Hydrogen, Next.js, developer preview, another framework
Cost items decide the calculation over three years, not just the build
Questions in the self-test show whether theme, hybrid or headless fits better
Status of the information: Statements on Hydrogen, Oxygen, the developer preview and the Storefront API come from Shopify's documentation, changelog, Hydrogen feed and Help Center, from the article by Shopify Germany and from Vercel's post, retrieved on 13 October 2026. The developer preview keeps changing, so check critical points at the linked source before you decide. We do not quote plan prices because they differ by country and change.
What is new in 2026: four changes that matter
The tiles show the official changes with the date of the announcement, separated into the developer preview and the current Hydrogen. The sources are in the section on sources and status.
Current Hydrogen and the developer preview compared
The current Hydrogen
According to Shopify's documentation, Hydrogen is an application built on React Router. It runs on Oxygen, Shopify's hosting for Hydrogen, and can also be self-hosted. According to the developer preview page, Shopify describes it as the fully supported route.
The developer preview
The developer preview detaches Hydrogen from React Router. Its core is plain JavaScript, and according to the announcement, bindings exist so far for React while other frameworks use the building blocks directly. Shopify calls it a toolkit rather than a framework. It was designed with the Next.js team at Vercel and, according to the announcement, runs on Oxygen, Vercel, Cloudflare Workers, Node and Deno.
For decision makers this means: Anyone who picks the preview plans with an interface that is still changing. Shopify wrote on 17 June 2026 that the API will change and that migration guidance will follow once the new interfaces are stable. We recommend not choosing by popularity but by the state of the interface and the expected lifetime of your project.
Do you need headless at all? The steps before it
Headless means your frontend is built and run separately from the Shopify theme. That gives you freedom, but also tasks. Shopify Germany writes on 14 July 2026 (in German) that a custom architecture should solve a specific problem. If you cannot name such a problem, we recommend starting with the steps before it.
Four steps, from small to big
- Extend the theme in a targeted way: A specific problem can be solved within the theme.
- Use metaobjects and sections: Content and layouts need more flexibility, while the store stays in the theme.
- Storefront Web Components or hybrid: Individual pages need more freedom, while the rest stays in the theme. According to its versioning page, Shopify lists Storefront Web Components as an unversioned surface that can change at any time.
- Headless: The problem can only be solved with a frontend of your own. The choice of route follows.
In favor of headless are very individual pages, many systems that come together in the frontend, or a development team of your own that can carry operations. Against it speak the lack of a specific bottleneck, important apps that have no counterpart in a custom frontend, or nobody being responsible for updates and incidents. In our assessment, headless only pays off when the additional contribution margin covers the extra costs per year, and the calculation is in the section on costs.
Which step fits your situation
The smaller the step, the lower the effort and operations, the bigger, the more freedom. Which route under headless fits is decided by team, content model, markets and operations.
The four routes overlap: the developer preview is a toolkit that also runs in Next.js, while the Storefront API is the interface that Next.js builds on without the preview.
The diagram is in German. Its four steps and four routes correspond to the sections on steps and routes.
What stays with Shopify and what you build yourself
The checkout stays with Shopify, everything before it lies in your frontend. The cart of the Storefront API returns a checkout URL that you use to send buyers to Shopify's web checkout. Products, prices, markets, orders and the data of customer accounts stay in Shopify, while pages, design, cart logic, search, content and the connection of apps are built by you in the frontend.
How far you can customize the checkout depends on the plan. According to the Shopify Help Center, the editor and apps for the thank-you and order status pages are available from Basic, while apps for the information, shipping and payment pages and the Checkout Branding API require Plus. For Hydrogen on Oxygen you do not need Plus, as Oxygen causes no extra costs on paid plans according to the documentation.
You check apps one by one
Whether an app works in a custom frontend depends on the app: some extend the theme and have no counterpart in a headless frontend. Check every business-critical app in four steps:
- What does the app do in the store?
- Is there an API or a headless package for it?
- Who builds and maintains the connection?
- What does operation cost over three years?
Shopify Catalog does not require headless
Headless is not required for inclusion in Shopify Catalog. According to the Help Center, products from the online store and from Hydrogen or headless channels can be included if they meet the requirements listed there. For Hydrogen and headless, the right route format is part of that, and the documentation names /products/:handle as the default. According to the changelog (WebMCP, UCP), Shopify storefronts already provide WebMCP and the UCP profile themselves.
Who does what with headless
The checkout keeps running at Shopify, everything before it lies in your frontend. The frontend fetches product, price and cart data through the Storefront API.
For hosting you have a choice: on Oxygen, Shopify runs the platform, while with other providers you run the frontend yourself. In both cases updates and monitoring of your application stay with you.
The diagram is in German. Its two columns correspond to the section on what stays with Shopify and what you build yourself.
Hydrogen or Next.js: four routes that work with Shopify
The four routes are not a ranking. Each tile says when the route makes sense and what you carry yourself. The routes overlap, because the developer preview also runs in Next.js, and the Storefront API is the interface that Next.js builds on without the preview.
What decides: five axes instead of a ranking
- Skills in the team: Which framework does the team know, and who carries operations?
- Content model: Who maintains content, with what, and what does the preview with real product data look like?
- Markets and languages: How many markets, domains and languages do you need, and who maintains redirects and hreflang?
- Maturity of the interface: Versioned Storefront API or a preview that is still changing?
- Operating model: Oxygen or another provider, with which costs and responsibilities?
We build websites with Next.js, Vercel and Sanity and therefore have a vested interest in this question. That is why we name the counterarguments ourselves: the current Hydrogen is the route Shopify fully supports, and in our assessment, a well-extended theme is enough for many stores.
What headless costs over three years: five items and one calculation
The build is only one of five cost items. The pages of Shopify's documentation on Hydrogen and Oxygen do not state project costs for headless, and the ranges we found in articles measure different things, such as new builds, migrations or enterprise projects. We therefore do not quote a flat figure but show the calculation.
- Build: concept, design, development, integrations and testing of the frontend, one-off.
- Hosting: Oxygen or another provider, ongoing. With providers such as Vercel, the bill depends on traffic, caching and rendering strategy.
- Headless CMS: licence and upkeep if content does not live in Shopify.
- Apps: replace or connect apps without a headless counterpart, one-off and ongoing.
- Ongoing engineering: API version changes, framework updates, security updates, monitoring and cover.
The calculation: The extra costs per year (hosting, CMS, apps, ongoing engineering and a share of the build) are set against the additional contribution margin per year that the frontend is supposed to bring. Calculate over three years and use your own figures. If the additional contribution margin does not cover the extra costs, that speaks for a theme or a hybrid. Switching and exit costs belong in the calculation too, because going back to the theme usually means rebuilding pages and integrations and bringing content back.
Oxygen: According to Shopify's documentation, Oxygen causes no extra costs on paid plans (status: 13 October 2026). Since 3 August 2026 it can be used from development stores, and since 25 August 2026 from trial stores, and deployment URLs require a store login there. The documentation does not state anything about bandwidth. You find plan prices at Shopify, and we do not quote them because they differ by country.
Performance: what is proven and what is not
A stack is not automatically faster, and in practice what matters most are images, scripts, caching and measuring in the field. On the pages of Shopify's documentation on Hydrogen and the Storefront API we find no performance comparisons with Next.js (status: 13 October 2026). We therefore do not adopt percentages for a speed advantage of headless without a disclosed method.
This is how you check a performance figure:
- Tool: Which tool measured, for example Lighthouse or real user data?
- Sample: How many pages and devices, which page types?
- Period: A single measurement fluctuates strongly, a period shows the trend.
- Field data: Core Web Vitals from real visits count for more than lab values alone.
For context: buyer traffic on the Storefront API is not rate-limited according to Shopify, while bots and crawlers and the creation of checkouts are limited. In the developer preview, caching of Storefront API queries is an option per query according to the release notes of July 2026.
Editorial work: who maintains the content, and with what?
In our assessment, with headless it is not the framework that decides how happy the editorial team is, but whether content, preview and approval with real product data are settled in advance. With the theme editor gone, you need a replacement for pages, layouts and texts.
Two routes for content
- Metaobjects: Structured content stays in Shopify, and editors maintain it in the admin. This fits when content is structured in a manageable way.
- External headless CMS: Content lives in a system such as Sanity, Storyblok or Contentful. That brings free content models, roles, approval and preview, but costs licence, integration and upkeep.
We recommend settling these questions before you decide: Who maintains which pages? What does the preview with real product data look like? Who approves? And how high is the upkeep as an ongoing cost item? You find an overview of the systems in the headless CMS comparison.
SEO during the rebuild: the mandatory tasks
Headless does not improve SEO automatically, it shifts tasks into your project. A theme handles a lot by itself, whereas with a custom frontend these points are yours:
- Redirects and URL format: Plan old URLs as 301 redirects. For products, use the default format /products/:handle that the documentation names, or set up a server-side redirect (3XX) from there to your product page.
- Canonicals and hreflang: Your frontend sets them per page and market, so check them after the rebuild.
- Sitemaps: Your frontend generates them per language.
- Structured data: Your frontend has to output product, breadcrumb and organization data, with or without ready-made building blocks depending on the route.
- Measuring in the field: Compare Core Web Vitals from real visits before and after the rebuild.
Operations, data protection and accessibility: points to check
In our assessment, after go-live it is less the technology than the question of who is named as responsible for updates and incidents. With headless, this includes:
- API versions: The Storefront API is released in new versions every quarter. According to Shopify (status: 13 October 2026), the current version is 2026-10, released on 1 October 2026 and supported until at least 1 October 2027. Plan the version change as an ongoing task.
- Updates: Framework, package and security updates come up continuously.
- Monitoring and incidents: Who notices outages and who fixes them, also during holidays and sick leave?
- Responsibilities: Shopify, hosting provider, service provider and your own team: who is responsible for what?
Data protection and accessibility
With a self-built frontend, hosting region, data processing, consent and accessibility belong to the project scope. Check which data flows where, which region and provider host the frontend, whether data processing agreements and a consent solution are in place and whether the interface is implemented accessibly. This is not legal advice, and the legal assessment stays with your legal counsel.
Your self-test in seven questions
Answer each question with yes or no. The evaluation is below, it is our assessment and does not replace advice.
- Can you name a specific problem that a theme does not solve?
- Do you know who maintains content and how long the editorial team waits for changes?
- Do your business-critical apps have a path for headless?
- Is it settled who can be reached during incidents?
- Can you name which pages need an individual design?
- Are extra costs per year and additional contribution margin calculated transparently?
- Are markets, data protection and accessibility settled?
Evaluation: With zero to two yes answers, we recommend staying with an extended theme for now. With three to five yes answers, it is worth examining a hybrid. With six or seven yes answers, a closer look at headless is worthwhile. Question 1 is a must: if you answer no, we recommend staying with an extended theme for now, regardless of your score. If you like, we can go through your answers together.
What we do for you with Shopify and headless websites
The choice of route decides operations, upkeep and the effort of moving. Here are our services for Shopify and for headless websites.
Let's check whether theme, hybrid or headless fits you
Your questions about Shopify Hydrogen and Next.js
Sources and status
Status of the information: All sources were retrieved on 13 October 2026. The statements on Hydrogen, Oxygen, the developer preview and the Storefront API rely on Shopify's official pages and on Vercel's post. Pages without a visible date are listed with the retrieval date. Where two Shopify pages contradict each other, we quote only the statement of the documentation page with its retrieval date.
- Developer preview, Shopify, no date, retrieved on 13 October 2026.
- Announcement of the developer preview, Hydrogen feed, 17 June 2026.
- Hydrogen on Vercel, Hydrogen feed, 30 June 2026, and Vercel and Shopify are rebuilding Hydrogen, Vercel, 30 June 2026.
- Hydrogen and Oxygen fundamentals, Shopify, no date, retrieved on 13 October 2026.
- Oxygen for development stores, 3 August 2026, and for trial stores, 25 August 2026, Shopify changelog.
- Release notes of the preview of 8 July 2026, 2 October 2026 and 8 October 2026, Hydrogen feed.
- Shopify API limits, Shopify, no date, retrieved on 13 October 2026.
- Cart object of the Storefront API and Storefront API, version 2026-10, Shopify, retrieved on 13 October 2026.
- API versioning, Shopify, no date, retrieved on 13 October 2026.
- Headless overview and options for headless, Shopify, no date, retrieved on 13 October 2026.
- Customize checkout and requirements for Shopify Catalog, Shopify Help Center, no date, retrieved on 13 October 2026.
- Headless commerce vs. traditional retail, Shopify Germany (in German), 14 July 2026.
- WebMCP for Liquid and Hydrogen, 5 August 2026, and UCP 2026-08-25, 4 September 2026, Shopify changelog.