- Startseite
- Shopify Hydrogen oder Next.js
Shopify Hydrogen oder Next.js: Welcher Weg passt zu deinem Shop?
Hydrogen oder Next.js ist keine Rangfrage, sondern eine Frage von Situation, Team und Kosten
Die Frage verschiebt sich 2026: Seit dem 17. Juni 2026 gibt es Hydrogen als Developer Preview, deren Bausteine nicht mehr an React Router gebunden und für viele JavaScript-Frameworks gedacht sind, auch für Next.js. Das bisherige Hydrogen bleibt laut Shopify der voll unterstützte Weg. Welcher Weg zu dir passt, entscheiden die Fähigkeiten in deinem Team, dein Inhaltsmodell, deine Märkte und der Betrieb nach dem Go-live, nicht die Beliebtheit eines Frameworks.
Diese Seite zeigt, was sich geändert hat, was bei Shopify bleibt und was du selbst baust, wann ein Theme noch reicht, wie sich die Kosten über drei Jahre zusammensetzen und woran du erkennst, wohin deine Situation tendiert. Stand: 13. Oktober 2026.
Wege für ein eigenes Frontend im Überblick: Hydrogen, Next.js, Developer Preview, anderes Framework
Kostenposten bestimmen die Rechnung über drei Jahre, nicht nur der Aufbau
Fragen im Selbsttest zeigen, ob Theme, Hybrid oder Headless eher passt
Stand der Angaben: Aussagen zu Hydrogen, Oxygen, Developer Preview und Storefront API stammen aus der Dokumentation, dem Changelog, dem Hydrogen-Feed und dem Help Center von Shopify, dem Artikel von Shopify Deutschland sowie dem Beitrag von Vercel, abgerufen am 13. Oktober 2026. Die Developer Preview ändert sich laufend, prüfe kritische Punkte deshalb vor einer Entscheidung an der verlinkten Quelle. Preise von Plänen nennen wir nicht, sie unterscheiden sich je Land und ändern sich.
Was 2026 neu ist: vier Änderungen, die zählen
Die Kacheln zeigen die offiziellen Änderungen mit Datum der Ankündigung, getrennt nach Developer Preview und dem bisherigen Hydrogen. Die Quellen stehen im Abschnitt Quellen und Stand.
Bisheriges Hydrogen und Developer Preview im Vergleich
Das bisherige Hydrogen
Hydrogen ist laut Shopify-Dokumentation eine Anwendung auf Basis von React Router. Es läuft auf Oxygen, Shopifys Hosting für Hydrogen, und lässt sich auch selbst hosten. Laut Developer-Preview-Seite beschreibt Shopify es als den voll unterstützten Weg.
Die Developer Preview
Die Developer Preview löst Hydrogen von React Router. Der Kern ist reines JavaScript, Bindings gibt es laut Ankündigung bisher für React, andere Frameworks nutzen die Bausteine direkt. Shopify nennt sie Toolkit statt Framework. Sie wurde mit dem Next.js-Team von Vercel entworfen und läuft laut Ankündigung auf Oxygen, Vercel, Cloudflare Workers, Node und Deno.
Für Entscheider heißt das: Wer die Preview wählt, plant mit einer Schnittstelle, die sich noch ändert. Shopify schrieb am 17. Juni 2026, die API werde sich ändern und Migrationshilfe folge, sobald die neuen Schnittstellen stabil sind. Wir empfehlen, die Wahl nicht nach Beliebtheit zu treffen, sondern nach dem Stand der Schnittstelle und der Laufzeit deines Projekts.
Brauchst du Headless überhaupt? Die Stufen davor
Headless heißt, dass dein Frontend getrennt vom Shopify-Theme gebaut und betrieben wird. Das schafft Freiheit, aber auch Aufgaben. Shopify Deutschland schreibt am 14. Juli 2026, eine individuelle Architektur solle ein konkretes Problem lösen. Wer kein solches Problem benennen kann, startet nach unserer Einschätzung mit den Stufen davor.
Vier Stufen, vom kleinen zum großen Schritt
- Theme gezielt ausbauen: Ein konkretes Problem lässt sich im Theme lösen.
- Metaobjects und Sections nutzen: Inhalte und Layouts brauchen mehr Flexibilität, der Shop bleibt im Theme.
- Storefront Web Components oder Hybrid: Einzelne Seiten brauchen mehr Freiheit, der Rest bleibt im Theme. Shopify führt die Storefront Web Components laut Versionierungsseite als unversionierte Oberfläche, die sich jederzeit ändern kann.
- Headless: Das Problem lässt sich nur mit einem eigenen Frontend lösen. Danach folgt die Wahl des Wegs.
Für Headless sprechen sehr individuelle Seiten, viele Systeme, die im Frontend zusammenlaufen, oder ein eigenes Entwicklungsteam, das den Betrieb tragen kann. Dagegen spricht, wenn du keinen konkreten Engpass benennen kannst, wenn wichtige Apps im eigenen Frontend kein Gegenstück haben oder wenn niemand für Updates und Störungen zuständig ist. Nach unserer Einschätzung lohnt sich Headless erst, wenn der zusätzliche Deckungsbeitrag die Mehrkosten pro Jahr deckt, die Rechnung steht im Abschnitt Kosten.
Welche Stufe zu deiner Lage passt
Je kleiner die Stufe, desto geringer sind Aufwand und Betrieb, je größer, desto mehr Freiheit. Welcher Weg unter Headless passt, entscheiden Team, Inhaltsmodell, Märkte und Betrieb.
Die vier Wege überschneiden sich: Die Developer Preview ist ein Toolkit, das auch in Next.js läuft, die Storefront API ist die Schnittstelle, auf der Next.js ohne Preview aufbaut.
Das Diagramm ist auf Deutsch. Seine vier Stufen und vier Wege entsprechen den Abschnitten Stufen und Wege.
Was bei Shopify bleibt und was du selbst baust
Der Checkout bleibt bei Shopify, alles davor liegt in deinem Frontend. Der Warenkorb der Storefront API liefert eine Checkout-URL, über die du Käufer zu Shopifys Web-Checkout schickst. Produkte, Preise, Märkte, Bestellungen und die Daten der Kundenkonten bleiben in Shopify, Seiten, Design, Warenkorb-Logik, Suche, Inhalte und die Anbindung von Apps baust du im Frontend.
Wie weit du den Checkout anpassen kannst, hängt am Plan. Laut Shopify Help Center gibt es den Editor und Apps für die Dankes- und Bestellstatusseite ab Basic, Apps für Informations-, Versand- und Zahlungsseite sowie die Checkout Branding API nur mit Plus. Für Hydrogen auf Oxygen brauchst du Plus nicht, denn Oxygen verursacht laut Dokumentation auf bezahlten Plänen keine Zusatzkosten.
Apps prüfst du einzeln
Ob eine App im eigenen Frontend funktioniert, hängt von der App ab: Manche erweitern das Theme und haben im Headless-Frontend kein Gegenstück. Prüfe deshalb jede geschäftskritische App in vier Schritten:
- Was macht die App im Shop?
- Gibt es eine API oder ein Headless-Paket dafür?
- Wer baut und pflegt die Anbindung?
- Was kostet der Betrieb über drei Jahre?
Shopify Catalog braucht kein Headless
Für die Aufnahme in Shopify Catalog ist Headless nicht nötig. Produkte aus dem Online Shop und aus Hydrogen- oder Headless-Kanälen können laut Help Center aufgenommen werden, wenn sie die dortigen Voraussetzungen erfüllen. Bei Hydrogen und Headless gehört das richtige Routenformat dazu, als Standard nennt die Dokumentation /products/:handle. WebMCP und das UCP-Profil stellen Shopify-Storefronts laut Changelog (WebMCP, UCP) bereits selbst bereit.
Wer macht was bei Headless
Der Checkout läuft weiter bei Shopify, alles davor liegt in deinem Frontend. Das Frontend holt Produkt-, Preis- und Warenkorbdaten über die Storefront API.
Beim Hosting hast du die Wahl: Auf Oxygen betreibt Shopify die Plattform, bei anderen Anbietern betreibst du das Frontend selbst. In beiden Fällen bleiben Updates und Monitoring deiner Anwendung bei dir.
Das Diagramm ist auf Deutsch. Seine zwei Spalten entsprechen dem Abschnitt Was bei Shopify bleibt und was du selbst baust.
Hydrogen oder Next.js: vier Wege, die mit Shopify möglich sind
Die vier Wege sind keine Rangliste. Jede Kachel nennt, wann der Weg sinnvoll ist und was du selbst trägst. Die Wege überschneiden sich, denn die Developer Preview läuft auch in Next.js, und die Storefront API ist die Schnittstelle, auf der Next.js ohne Preview aufbaut.
Wonach du entscheidest: fünf Achsen statt einer Rangliste
- Fähigkeiten im Team: Welches Framework kennt das Team, und wer trägt den Betrieb?
- Inhaltsmodell: Wer pflegt Inhalte, womit, und wie sieht die Vorschau mit echten Produktdaten aus?
- Märkte und Sprachen: Wie viele Märkte, Domains und Sprachen brauchst du, und wer pflegt Weiterleitungen und hreflang?
- Reife der Schnittstelle: Versionierte Storefront API oder Preview, die sich noch ändert?
- Betriebsmodell: Oxygen oder ein anderer Anbieter, mit welchen Kosten und Zuständigkeiten?
Wir bauen Websites mit Next.js, Vercel und Sanity und haben deshalb ein Eigeninteresse an dieser Frage. Darum nennen wir die Gegenargumente selbst: Das bisherige Hydrogen ist der von Shopify voll unterstützte Weg, und nach unserer Einschätzung reicht für viele Shops ein gut ausgebautes Theme.
Was Headless über drei Jahre kostet: fünf Posten und eine Rechnung
Der Aufbau ist nur einer von fünf Kostenposten. Auf den Seiten von Shopifys Dokumentation zu Hydrogen und Oxygen stehen keine Projektkosten für Headless, und die Spannen, die wir in Artikeln gefunden haben, messen Verschiedenes, etwa Neubau, Migration oder Enterprise-Projekte. Wir nennen deshalb keine Pauschale, sondern zeigen die Rechnung.
- Aufbau: Konzept, Design, Entwicklung, Anbindungen und Tests des Frontends, einmalig.
- Hosting: Oxygen oder ein anderer Anbieter, laufend. Bei Anbietern wie Vercel hängt die Rechnung an Traffic, Caching und Rendering-Strategie.
- Headless-CMS: Lizenz und Pflege, wenn Inhalte nicht in Shopify liegen.
- Apps: Apps ohne Headless-Gegenstück ersetzen oder anbinden, einmalig und laufend.
- Laufende Technik: API-Versionswechsel, Framework-Updates, Sicherheitsupdates, Monitoring und Vertretung.
Die Rechnung: Die Mehrkosten pro Jahr (Hosting, CMS, Apps, laufende Technik und anteiliger Aufbau) stehen dem zusätzlichen Deckungsbeitrag pro Jahr gegenüber, den das Frontend bringen soll. Rechne über drei Jahre und setze eigene Zahlen ein. Deckt der zusätzliche Deckungsbeitrag die Mehrkosten nicht, spricht das für Theme oder Hybrid. Auch Wechsel- und Ausstiegskosten gehören dazu, denn ein Rückweg zum Theme heißt in der Regel, Seiten und Anbindungen neu aufzubauen und Inhalte zurückzuholen.
Oxygen: Laut Shopify-Dokumentation verursacht Oxygen auf bezahlten Plänen keine Zusatzkosten (Stand 13. Oktober 2026). Seit dem 3. August 2026 lässt es sich von Development Stores und seit dem 25. August 2026 von Trial-Stores nutzen, Deployment-URLs verlangen dort einen Store-Login. Zur Bandbreite macht die Dokumentation keine Angabe. Die Planpreise findest du bei Shopify, wir nennen sie nicht, weil sie sich je Land unterscheiden.
Performance: was belegt ist und was nicht
Ein Stack ist nicht automatisch schneller, entscheidend sind in der Praxis meist Bilder, Skripte, Caching und die Messung im Feld. Auf den Seiten von Shopifys Dokumentation zu Hydrogen und zur Storefront API finden wir keine Leistungsvergleiche mit Next.js (Stand 13. Oktober 2026). Prozentzahlen zum Geschwindigkeitsvorsprung von Headless ohne offengelegte Methode übernehmen wir deshalb nicht.
So prüfst du eine Performance-Zahl:
- Werkzeug: Welches Tool hat gemessen, zum Beispiel Lighthouse oder echte Nutzerdaten?
- Stichprobe: Wie viele Seiten und Geräte, welche Seitentypen?
- Zeitraum: Eine einzelne Messung schwankt stark, ein Zeitraum zeigt den Trend.
- Felddaten: Core Web Vitals aus echten Besuchen zählen mehr als Laborwerte allein.
Zur Einordnung: Käufer-Traffic wird bei der Storefront API laut Shopify nicht begrenzt, begrenzt sind Bots und Crawler sowie die Erstellung von Checkouts. Das Caching von Storefront-API-Abfragen ist in der Developer Preview laut den Release Notes vom Juli 2026 eine Option je Abfrage.
Redaktion: wer pflegt die Inhalte, und womit?
Nach unserer Einschätzung entscheidet bei Headless nicht das Framework über die Zufriedenheit der Redaktion, sondern ob Inhalte, Vorschau und Freigabe mit echten Produktdaten vorab geklärt sind. Mit dem Wegfall des Theme-Editors brauchst du einen Ersatz für Seiten, Layouts und Texte.
Zwei Wege für Inhalte
- Metaobjects: Strukturierte Inhalte bleiben in Shopify, Redakteure pflegen sie im Admin. Das passt, wenn die Inhalte überschaubar strukturiert sind.
- Externes Headless-CMS: Inhalte liegen in einem System wie Sanity, Storyblok oder Contentful. Das bringt freie Inhaltsmodelle, Rollen, Freigabe und Vorschau, kostet aber Lizenz, Anbindung und Pflege.
Wir empfehlen, vor der Entscheidung zu klären: Wer pflegt welche Seiten? Wie sieht die Vorschau mit echten Produktdaten aus? Wer gibt frei? Und wie hoch ist der Pflegeaufwand als laufender Kostenposten? Einen Überblick über die Systeme findest du im Vergleich der Headless-CMS.
SEO beim Umbau: die Pflichtaufgaben
Headless verbessert SEO nicht automatisch, es verlagert Aufgaben in dein Projekt. Ein Theme übernimmt vieles selbst, bei einem eigenen Frontend liegen diese Punkte bei dir:
- Weiterleitungen und URL-Format: Plane alte URLs als 301-Weiterleitungen ein. Nutze bei Produkten das Standardformat /products/:handle, das die Dokumentation nennt, oder richte serverseitig eine Weiterleitung (3XX) von dort auf deine Produktseite ein.
- Canonicals und hreflang: Dein Frontend setzt sie je Seite und Markt, prüfe sie nach dem Umbau.
- Sitemaps: Dein Frontend erzeugt sie je Sprache.
- Strukturierte Daten: Produkt-, Breadcrumb- und Organisationsdaten muss dein Frontend ausgeben, je nach Weg mit oder ohne vorgefertigte Bausteine.
- Messung im Feld: Vergleiche Core Web Vitals aus echten Besuchen vor und nach dem Umbau.
Betrieb, Datenschutz und Barrierefreiheit: Prüfpunkte
Nach unserer Einschätzung entscheidet nach dem Go-live weniger die Technologie als die Frage, wer für Updates und Störungen namentlich zuständig ist. Bei Headless gehören dazu:
- API-Versionen: Die Storefront API erscheint quartalsweise in neuen Versionen. Aktuell ist laut Shopify (Stand 13. Oktober 2026) die Version 2026-10, veröffentlicht am 1. Oktober 2026 und mindestens bis zum 1. Oktober 2027 unterstützt. Plane den Versionswechsel als laufende Aufgabe ein.
- Updates: Framework-, Paket- und Sicherheitsupdates fallen laufend an.
- Monitoring und Störungen: Wer bemerkt Ausfälle, und wer behebt sie, auch bei Urlaub und Krankheit?
- Zuständigkeiten: Shopify, Hosting-Anbieter, Dienstleister und eigenes Team: Wer ist wofür zuständig?
Datenschutz und Barrierefreiheit
Bei einem selbst gebauten Frontend gehören Hosting-Region, Auftragsverarbeitung, Einwilligungen und Barrierefreiheit zum Projektumfang. Prüfe, welche Daten wohin fließen, welche Region und welcher Anbieter das Frontend hosten, ob Verträge zur Auftragsverarbeitung und eine Einwilligungslösung vorliegen und ob die Oberfläche barrierefrei umgesetzt wird. Das ist keine Rechtsberatung, die rechtliche Bewertung bleibt bei deiner Rechtsberatung.
Dein Selbsttest in sieben Fragen
Beantworte jede Frage mit Ja oder Nein. Die Auswertung steht darunter, sie ist unsere Einschätzung und ersetzt keine Beratung.
- Kannst du ein konkretes Problem nennen, das ein Theme nicht löst?
- Weißt du, wer Inhalte pflegt und wie lange die Redaktion auf Änderungen wartet?
- Haben deine geschäftskritischen Apps einen Weg für Headless?
- Ist geklärt, wer bei Störungen erreichbar ist?
- Kannst du benennen, welche Seiten ein individuelles Design brauchen?
- Sind Mehrkosten pro Jahr und zusätzlicher Deckungsbeitrag nachvollziehbar gerechnet?
- Sind Märkte, Datenschutz und Barrierefreiheit geklärt?
Auswertung: Bei null bis zwei Ja bleibst du nach unserer Einschätzung zunächst beim Ausbau des Themes. Bei drei bis fünf Ja lohnt es sich, einen Hybrid zu prüfen. Bei sechs oder sieben Ja lohnt eine genauere Prüfung von Headless. Frage 1 ist ein Muss: Antwortest du dort mit Nein, bleibst du nach unserer Einschätzung unabhängig von der Punktzahl zunächst beim Ausbau des Themes. Wenn du magst, gehen wir deine Antworten gemeinsam durch.
Was wir bei Shopify und bei Headless-Websites für dich tun
Die Wahl des Wegs entscheidet über Betrieb, Pflege und Umzugsaufwand. Hier siehst du unsere Leistungen zu Shopify und zu Headless-Websites.
Prüfen wir, ob Theme, Hybrid oder Headless bei dir passt
Deine Fragen zu Shopify Hydrogen und Next.js
Quellen und Stand
Stand der Angaben: Alle Quellen wurden am 13. Oktober 2026 abgerufen. Die Aussagen zu Hydrogen, Oxygen, Developer Preview und Storefront API stützen sich auf die offiziellen Seiten von Shopify und auf den Beitrag von Vercel. Seiten ohne sichtbares Datum sind mit dem Abrufdatum angegeben. Wo zwei Seiten von Shopify sich widersprechen, nennen wir nur die Aussage der Dokumentationsseite mit Abrufdatum.
- Developer Preview, Shopify, ohne Datum, abgerufen am 13. Oktober 2026.
- Ankündigung der Developer Preview, Hydrogen-Feed, 17. Juni 2026.
- Hydrogen auf Vercel, Hydrogen-Feed, 30. Juni 2026, und Vercel and Shopify are rebuilding Hydrogen, Vercel, 30. Juni 2026.
- Hydrogen und Oxygen: Grundlagen, Shopify, ohne Datum, abgerufen am 13. Oktober 2026.
- Oxygen für Development Stores, 3. August 2026, und für Trial-Stores, 25. August 2026, Shopify-Changelog.
- Release Notes der Preview vom 8. Juli 2026, 2. Oktober 2026 und 8. Oktober 2026, Hydrogen-Feed.
- Shopify API limits, Shopify, ohne Datum, abgerufen am 13. Oktober 2026.
- Cart-Objekt der Storefront API und Storefront API, Version 2026-10, Shopify, abgerufen am 13. Oktober 2026.
- API-Versionierung, Shopify, ohne Datum, abgerufen am 13. Oktober 2026.
- Headless-Übersicht und Optionen für Headless, Shopify, ohne Datum, abgerufen am 13. Oktober 2026.
- Checkout anpassen und Voraussetzungen für Shopify Catalog, Shopify Help Center, ohne Datum, abgerufen am 13. Oktober 2026.
- Headless Commerce vs. traditioneller Handel, Shopify Deutschland, 14. Juli 2026.
- WebMCP für Liquid und Hydrogen, 5. August 2026, und UCP 2026-08-25, 4. September 2026, Shopify-Changelog.