Headless WooCommerce + Next.js: Wie man die Aufgaben auf zwei Umgebungen verteilt

Ein WooCommerce-Shop lässt sich so aufbauen, dass WordPress weder für das Aussehen noch für das Rendern der Seiten zuständig ist. Die Oberfläche übernimmt eine eigene Next.js-Anwendung, und WooCommerce bleibt die Verkaufs-Engine. Dieser Aufbau gibt Freiheit im Frontend, verlangt aber eine klare Aufteilung: Was gehört in welche Umgebung, und wo verläuft die Grenze zwischen beiden?

Kontext

Eine Headless-Architektur trennt die visuelle Ebene des Shops von dem System, das den Verkauf abwickelt. In der Praxis bedeutet das zwei unabhängige Umgebungen mit eigenem Hosting, eigenen Deployments und eigener Wartung.

Die E-Commerce-Logik muss dabei nicht neu gebaut werden. Produkte, Bestellungen, Zahlungen und Kundenkonten verwaltet weiterhin WooCommerce, mit seinen bewährten Mechanismen und bestehenden Integrationen. Neu ist nur die Ebene, die der Kunde sieht.

Lösung

Backend: WordPress + WooCommerce

WordPress und WooCommerce laufen auf klassischem PHP-Hosting mit einer MySQL- oder MariaDB-Datenbank. In dieser Umgebung verwalten Sie:

• Produkte, Preise und Lagerbestände;
• Bestellungen und Kunden;
• Zahlungen, z. B. über Stripe oder Przelewy24;
• Benutzerkonten und Kaufhistorie;
• Berechtigungen zum Herunterladen gekaufter digitaler Produkte.

Frontend: Next.js

Die Next.js-Anwendung läuft in einer zweiten Umgebung, z. B. auf Vercel, und ist unter der eigentlichen Domain des Shops erreichbar. Sie ist zuständig für:

• die Anzeige von Produkten und Kategorien;
• Navigation und Benutzeroberfläche;
• den Warenkorb;
• die Anbindung an den Bestellprozess;
• den Kundenbereich und die Bibliothek gekaufter Produkte.

Kommunikation über die Store API

Beide Systeme verbindet die WooCommerce-API, insbesondere die Store API. Sie ermöglicht es, Produktdaten abzurufen sowie den Warenkorb und den Kaufprozess abzuwickeln. Das Frontend hält also keine eigene Kopie der Verkaufslogik, sondern nutzt die, die WooCommerce bereitstellt.

Checkout zunächst in WooCommerce

In der ersten Version lohnt es sich, den Bestellabschluss in WooCommerce zu belassen: den standardmäßigen blockbasierten Checkout oder die klassische Checkout-Vorlage.

Der Grund ist praktisch. Zahlungsintegrationen, insbesondere polnische Zahlungs-Gateways, erfordern in einer Headless-Architektur oft zusätzlichen Aufwand. Bleibt der Checkout in WooCommerce, sinkt die Komplexität der Umsetzung, und bestehende Integrationen lassen sich weiter nutzen. Ein unabhängiger Checkout in Next.js kann in einer späteren Phase folgen.

Digitale Produkte

Hier ist die Rollenverteilung besonders deutlich. Der Kunde kauft ein Produkt, meldet sich in seinem Konto an und erhält Zugang zu einer persönlichen Download-Bibliothek.

Die Dateien müssen dabei nicht unter öffentlichen URLs bereitgestellt werden.

Was diese Aufteilung bringt

• das Frontend ist unabhängig vom Backend;
• die Oberfläche lässt sich ohne die Grenzen klassischer WordPress-Themes gestalten;
• der Shop nutzt weiterhin das WooCommerce-Ökosystem und bestehende Integrationen;
• die Performance lässt sich durch serverseitiges Rendern, statisches Rendern und passendes Caching optimieren;
• die Anwendung lässt sich leichter um weitere Funktionen erweitern.

Einschränkungen

Headless WooCommerce ist nicht für jeden Shop die richtige Wahl. Bei einem einfachen Shop kann klassisches WooCommerce wirtschaftlicher und leichter zu warten sein.

Zwei unabhängige Umgebungen bedeuten außerdem zusätzliche Verantwortung für:

• die Integration zwischen den Systemen;
• die Authentifizierung;
• die Synchronisierung von Sitzungen;
• die Wartung der Infrastruktur.

Interessant wird dieser Aufbau, wenn Sie eine individuelle Oberfläche, einen eigenen Kundenbereich, den Verkauf digitaler Produkte oder einen weiteren Ausbau der Anwendung benötigen.

Fazit

WooCommerce muss nicht für das Aussehen des Shops zuständig sein. Es kann die Verkaufs-Engine bleiben, während Next.js die Oberfläche übernimmt. Entscheidend ist, wo die Grenze gezogen wird: Daten und Berechtigungen in WooCommerce, Darstellung in Next.js und der Checkout in WooCommerce, solange es keinen Grund gibt, ihn zu verlagern.