Next.js-Entwickler in Leipzig

Mein Name ist Mariusz Szatkowski, ich sitze in Gdynia in Polen und arbeite seit 2006 mit WordPress. Next.js setze ich dort ein, wo ein Shop ein eigenes Frontend braucht: Produktseiten, Warenkorb und der Weg zur Kasse laufen in meinem Code, Katalog, Preise und Bestellungen bleiben im Shopsystem. Das Projekt läuft bei mir allein und aus der Ferne. Es gibt keine Termine und keine Telefonate, dafür einen schriftlichen Umfang, an dem Sie sich bis zur Abnahme orientieren können.

Der Leipziger Einzelhandel entwickelte sich laut dem Monitoringbericht Einzelhandel 2019 der Stadt positiv, trotz des wachsenden Online-Handels: Die Verkaufsfläche erreichte 889.000 Quadratmeter, die Zahl der Betriebe sank in sechs Jahren um elf Prozent, also um 390. Für Händler heißt das: Wer neben dem Laden einen Shop betreibt, konkurriert mit allen anderen um dieselbe Aufmerksamkeit, und ein Frontend, das sich ihrem Sortiment anpasst, kann den Unterschied machen. Es ist aber nur eine Option, kein Muss.

Foto: Flocci Nivis, CC BY 4.0, Wikimedia Commons.

#Welche Schnittstelle Ihr Backend anbietet

Bevor ich über Next.js rede, lese ich die Schnittstelle Ihres Shopsystems. Sie bestimmt, was das Frontend selbst tun muss.

Die Shopify-Adresse hat die Form https://{shop}.myshopify.com/api/2026-10/graphql.json. Die Version 2026-10 nennt shopify.dev im November 2026 als aktuelle. Eine Versionsnummer gehört deshalb in die Konfiguration und in den Wartungsplan, nicht fest in verstreute Dateien.

Für Saleor als Backend gibt es die Seite Next.js in Basel, dort steht auch, wann ein Standardshop reicht.

#Produktseiten: ISR oder Cache Components

Eine Produktseite ändert sich selten und wird oft gelesen. Das spricht für Zwischenspeicherung. Preis und Bestand ändern sich aber, und ein falscher Preis auf der Seite ist ein Problem, das Sie nicht dem Cache zuschieben können. Next.js 16.4.6 ist laut npm-Registry seit dem 9. November 2026 die aktuelle Version (Stand November 2026), und es kennt zwei Wege.

ISR ohne Cache Components. Sie setzen export const revalidate = 3600 und liefern mit generateStaticParams die Produkte, die beim Build entstehen. Laut ISR-Anleitung liefert die erste Anfrage nach Ablauf noch die alte Seite, im Hintergrund entsteht die neue. Die Anleitung empfiehlt eine hohe Zeitspanne und für Genaueres die Invalidierung auf Abruf. Am Header x-nextjs-cache sehen Sie, ob eine Antwort HIT, STALE, MISS oder REVALIDATED war.

Cache Components. Aktiviert mit cacheComponents: true. Laut Caching-Dokumentation haben neue App-Router-Projekte das schon in der Voreinstellung. Die Direktive use cache speichert das Ergebnis einer asynchronen Funktion oder Komponente, cacheLife setzt die Lebensdauer, cacheTag hängt ein Etikett für die Invalidierung an. Was nicht zwischengespeichert wird, etwa der Warenkorb, steht in einer <Suspense>-Grenze und kommt zur Anfragezeit. Die statische Hülle der Seite kommt trotzdem sofort vom CDN.

Eine Produktabfrage gegen Shopify sieht damit so aus:

import { cacheLife, cacheTag } from 'next/cache'

export async function getProduct(handle: string) {
  'use cache'
  cacheLife('hours')
  cacheTag(`product-${handle}`)

  const res = await fetch(
    `https://${process.env.SHOP}.myshopify.com/api/2026-10/graphql.json`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Shopify-Storefront-Private-Token': process.env.SHOPIFY_PRIVATE_TOKEN!,
      },
      body: JSON.stringify({
        query: 'query($handle: String!) { product(handle: $handle) { id title handle } }',
        variables: { handle },
      }),
    },
  )
  return (await res.json()).data.product
}

Der Build erzeugt solche Anfragen ohne Käufer. Für Aufrufe, die von Käuferverkehr ausgelöst werden, verlangt Shopify den Header Shopify-Storefront-Buyer-IP mit der IP-Adresse des Käufers, sonst drohen Drosselung und schwächerer Bot-Schutz. Eine statische Auslieferung braucht ihn nicht, ein Warenkorbaufruf vom Server schon.

#Aktualisierung bei Preisänderung

Ein Webhook von Shopify stößt die Invalidierung an. Mein Route Handler prüft die Signatur im Header X-Shopify-Hmac-Sha256, liest das Produkt aus der Nutzlast und ruft revalidateTag für das passende Etikett auf. Laut Webhook-Dokumentation ist die Zustellung nicht immer garantiert, doppelte Ereignisse erkennt man an X-Shopify-Webhook-Id, und eine Reihenfolge wird nicht zugesichert. Deshalb bekommt jede Produktseite zusätzlich eine begrenzte Lebensdauer: Ein verpasster Webhook zeigt dann höchstens eine Stunde lang den alten Preis, nicht dauerhaft.

Bei mehreren Instanzen gilt ein weiterer Punkt aus der ISR-Anleitung: Der Standard-Cache liegt pro Instanz, die Invalidierung erreicht nur die Instanz, die den Aufruf erhält. Läuft der Shop auf mehr als einer Instanz, gehört ein gemeinsamer Cache-Handler in den Umfang. Auf Serverless-Plattformen halten Einträge der Standardablage laut use-cache-Dokumentation oft nicht zwischen Anfragen. Wo Sie hosten, entscheidet also mit über die Cache-Strategie.

Dazu eine Notiz für die Sichtbarkeit: Crawler ohne Unterstützung für nachgeladene Metadaten bekommen laut Next.js eine zur Anfragezeit gerenderte Seite. Daten, die beim Build erreichbar waren, müssen deshalb auch zur Laufzeit erreichbar sein, sonst liefert die Seite diesen Bots einen Fehler.

Die Bild- und Ladezeitfragen sind auf der Seite Next.js in Düsseldorf beschrieben. Als Maßstab nutze ich die offiziellen Schwellen von web.dev: LCP bis 2,5 s, INP bis 200 ms, CLS bis 0,1.

#Warenkorb und Übergabe an die Kasse

Der Warenkorb ist die Stelle, an der ein Headless-Shop am leichtesten kaputtgeht. Bei Shopify legt cartCreate ihn mit Positionen aus merchandiseId und quantity an, cart liest ihn, cartLinesUpdate ändert Mengen. Laut Warenkorb-Dokumentation besteht die Cart-ID aus einem Token und einem geheimen Schlüssel. Fehlt der Schlüssel, entfernt die API Käuferdaten aus den Antworten, und Mutationen schlagen fehl.

Daraus folgt meine Aufteilung:

• Die Cart-ID liegt in einem httpOnly-Cookie. Gelesen wird es nur in einer Komponente hinter <Suspense>, nie innerhalb von use cache; Next.js verbietet cookies() dort und verlangt, den Wert als Argument zu übergeben.
• Die Produktseite bleibt statisch. Nur der Kaufbereich und die Warenkorbanzeige kommen zur Anfragezeit.
• Das Feld checkoutUrl frage ich erst ab, wenn der Käufer zur Kasse geht. Die Dokumentation rät dazu und verlangt, eine veraltete Adresse neu abzufragen.
• Mit einem gesetzten customerAccessToken öffnet die Kasse für eingeloggte Kunden eingeloggt.

Die Kasse läuft bei Shopify über checkoutUrl. Mein Frontend endet dort, und das hat eine rechtliche Folge, die ich im nächsten Abschnitt auseinanderhalte. Bei Shopware beginnt die Übergabe ähnlich, nur dass Warenkorb und Bestellung über die Store API laufen und die Kasse bei Bedarf in meinem Frontend steht. Wie weit mein Code reicht, lege ich vor dem Start schriftlich fest.

#Shoprecht, das auf der Seite bleibt

Die Pflichten treffen Sie als Händler, egal welches Frontend sie ausgibt. Im Headless-Aufbau ist nur die Frage neu, welcher Teil sie rendert. Ich nehme sie in den Umfang auf, mit dem Gesetzestext aus gesetze-im-internet.de.

Zwei Folgerungen. Erstens: Der Bestellbutton nach § 312j Abs. 3 BGB steht dort, wo die Bestellung abgeschickt wird. Läuft die Kasse bei Shopify, liegt er nicht in meinem Code. Ich prüfe vor der Abnahme, wie die Kasse beschriftet ist, und halte das Ergebnis im Protokoll fest. Ob die Formulierung für Ihren Shop ausreicht, bewertet Ihre Rechtsberatung. Zweitens: Eine Pflichtangabe auf der Produktseite fällt weg, sobald jemand das Template ändert. Ich lege deshalb Preis, Grundpreiseinheit und Steuerhinweis in eine gemeinsame Komponente, die Karte, Seite und Warenkorb nutzen.

Den Umzug eines bestehenden WooCommerce-Shops beschreibt die Düsseldorfer Migrationsseite, dort stehen auch Preisermäßigung und Widerrufsfunktion. Die Seite Shopify-Entwicklung in Leipzig behandelt den Shop selbst, die Seite WooCommerce in Leipzig die WordPress-Seite.

#Datenschutz: wohin das Frontend Daten sendet

Ein Headless-Frontend ruft mehr Dienste auf als ein Standardtheme, und jeder Aufruf ist ein Datenfluss. Dazu zählt die IP-Adresse des Käufers, die mein Server wie oben beschrieben an Shopify weitergibt. Ich liste vor dem Start auf, welche Dienste das Frontend im Browser und auf dem Server anspricht, damit Ihre Datenschutzerklärung dazu passt.

Zuständig für Sachsen ist die Sächsische Datenschutz- und Transparenzbeauftragte mit Sitz in Dresden. Auf ihrer Seite gibt es einen Bereich für Unternehmen und ein Formular unter “Beschwerde einreichen”. Die rechtliche Bewertung Ihrer Verträge und Einwilligungen bleibt bei Ihrer Rechtsberatung.

#Checkliste vor dem Start

• Welches Backend, welche Version, wer pflegt es?
• Welche Produktdaten ändern sich wie oft: Preis, Bestand, Beschreibung?
• Sind Grundpreisangaben im Katalog gepflegt, mit Einheit?
• Wo wird die Bestellung abgegeben, in meinem Frontend oder in der Kasse des Anbieters?
• Welche Märkte und Währungen gibt es?
• Läuft das Frontend auf einer oder auf mehreren Instanzen?
• Wer spielt Updates von Next.js und der Shop-API-Version ein?
• Wer liefert Layout und Texte?

#Wann ich Headless nicht empfehle

Wenn Ihr Sortiment überschaubar ist, ein Theme Ihr Layout schon abdeckt und niemand Zeit hat, eine zweite Anwendung zu betreuen, ist der Standardshop besser. Jeder zusätzliche Baustein braucht Updates und einen Zuständigen. Ich sage Ihnen das schriftlich, bevor ein Projekt beginnt.

#Ablauf eines Projekts

1. Sie schicken mir den Shop, das Ziel und den Wunschtermin über das Kontaktformular.
2. Ich lese die Schnittstelle Ihres Backends und stelle meine Fragen schriftlich.
3. Sie erhalten einen schriftlichen Umfang mit Annahmen und Ausschlüssen. Layout, Mockups und Wireframes liefern Sie, auf Wunsch über meine Tabellenvorlage.
4. Ich baue auf einer Staging-Umgebung, Sie prüfen schriftlich.
5. Nach der Abnahme gehe ich live. Danach ist eine Wartung möglich, Stunden rollen nicht in den nächsten Monat.

#Häufige Fragen

#Soll ich für meinen Leipziger Shop auf Next.js wechseln?

Nur wenn eine Eigenschaft des Standardshops Sie wirklich bremst: ein Frontend, das sich nicht anpassen lässt, mehrere Märkte aus einem Katalog oder ein Redaktionsteam, das Inhalte und Produkte frei kombinieren will. Läuft Ihr Shop gut, sage ich Ihnen das schriftlich, bevor ein Projekt entsteht.

#ISR oder Cache Components: was nehme ich für Produktseiten?

Bei einem neuen Projekt Cache Components, weil sie in neuen App-Router-Projekten laut Next.js-Dokumentation die Voreinstellung sind. Bei einem bestehenden Projekt mit revalidate und generateStaticParams bleibt ISR ohne Cache Components eine tragfähige Wahl. Entscheidend ist in beiden Fällen, dass Preise und Bestand ein Verfallsdatum und einen Auslöser für die Aktualisierung haben.

#Wie kommen Preisänderungen aus Shopify in den Cache?

Über einen Webhook. Ein Route Handler prüft die Signatur im Header X-Shopify-Hmac-Sha256 und ruft revalidateTag für das betroffene Produkt auf. Shopify garantiert die Zustellung nicht, deshalb läuft zusätzlich ein Abgleich, und die Lebensdauer im Cache bleibt begrenzt.

#Wo steht der Bestellbutton, wenn die Kasse bei Shopify läuft?

In der Kasse. Das Frontend übergibt den Warenkorb über die checkoutUrl, die Bestellung wird dort abgegeben. Ich prüfe vor der Abnahme, was auf meinen Seiten vor der Übergabe steht, und ob die Pflichtangaben nach § 312j BGB dort erscheinen, wo die Bestellung ausgelöst wird.

#Muss ich als Händler in Sachsen etwas an die Datenschutzaufsicht melden?

Zuständig ist für Sachsen die Sächsische Datenschutz- und Transparenzbeauftragte in Dresden. Ob Ihr Shop etwas melden oder dokumentieren muss, bewertet Ihre Rechtsberatung. Ich liefere die technische Übersicht, welche Daten das Frontend an welchen Dienst sendet.

#Gestalten Sie die Shopseiten?

Nein. Das Layout stammt von Ihnen oder Ihrer Agentur, Mockups und Wireframes ebenso. Für die Anordnung der Elemente bekommen Sie von mir eine Tabelle, in der Sie je Ansicht markieren, was wohin gehört. Daraus baue ich das responsive Frontend.

#Ihr Shop in einer E-Mail

Planen Sie ein Headless-Frontend für einen Shop in Leipzig oder wollen Sie wissen, ob Ihr Standardshop reicht? Schicken Sie mir über das Kontaktformular die Adresse Ihres Shops, Ihr Ziel, den Wunschtermin und den aktuellen Stack. Ich antworte schriftlich, mit Rückfragen, falls etwas fehlt, und mit einer ersten Schätzung. Für die Schätzung zahlen Sie nichts, und sie bindet Sie nicht.