Next.js und DSGVO-Cookies: der vollständige Konformitätsleitfaden

Das Wichtigste in Kürze

Eine Next.js-Website, die Google Analytics, das Meta-Pixel oder andere Tracker lädt, muss die Einwilligung der Besucher einholen, bevor diese Skripte ausgeführt werden. Das verlangen die DSGVO und § 25 TDDDG (früher TTDSG). Ein Banner allein genügt nicht: Nicht essenzielle Skripte müssen bis zur ausdrücklichen Zustimmung blockiert bleiben, die Signale von Google Consent Mode v2 müssen mit denied starten, die Entscheidung muss bei jeder clientseitigen Navigation gelten, und Sie brauchen einen Nachweis jeder Einwilligung. Dieser Leitfaden behandelt die rechtlichen Anforderungen, die Besonderheiten von Next.js (App Router, Server Components, SPA-Navigation, SSR) und eine Umsetzung Schritt für Schritt.

Warum Cookie-Konformität für eine Next.js-App so wichtig ist

Next.js ist ein React-Framework, das für Marketing-Websites, Onlineshops, SaaS-Produkte und redaktionelle Plattformen weit verbreitet ist, häufig mit Hosting auf Vercel oder Netlify. Seine Flexibilität ist zugleich das größte Compliance-Risiko: Entwickler binden routinemäßig Google Analytics 4, Google Tag Manager, das Meta-Pixel, Hotjar, Intercom und weitere Tools ein. Jedes davon setzt Cookies oder vergleichbare Tracker, die eine vorherige Einwilligung erfordern.

Der häufigste Fehler: Diese Skripte werden in _app.tsx, app/layout.tsx oder einer gemeinsamen Layout-Komponente geladen, ganz ohne Einwilligungsprüfung. Dieses Muster ist extrem verbreitet und ein klarer Verstoß gegen die DSGVO, denn die Tracker feuern bereits beim ersten Seitenaufruf, bevor der Besucher überhaupt wählen konnte.

Die Folgen sind real. Europäische Aufsichtsbehörden haben große Websites wegen Cookie-Verstößen mit Bußgeldern in zweistelliger Millionenhöhe belegt, Beschwerden von Organisationen wie noyb sind an der Tagesordnung, und ein Banner, das nicht hält, was es verspricht, kostet Vertrauen.

Was DSGVO und TDDDG für Cookies in Next.js verlangen

Für nicht essenzielle Cookies gelten drei Kernpflichten: Nutzer klar informieren, ihre Einwilligung vor der Aktivierung von Trackern einholen und den Widerruf so einfach machen wie die Einwilligung selbst.

Welche Cookies brauchen eine Einwilligung?

Die meisten Drittanbieter-Tools in einer Next.js-App sind betroffen:

• Webanalyse: Google Analytics 4, außerdem Matomo oder Plausible, sofern sie nicht einwilligungsfrei konfiguriert sind
• Werbung und Marketing: Meta-Pixel, LinkedIn Insight Tag, Google Ads, TikTok Pixel
• Nutzererlebnis: Hotjar, FullStory, LogRocket, Microsoft Clarity
• Support und Chat: Intercom, Drift, HubSpot Chat

Cookies, die für den Betrieb der Anwendung unbedingt erforderlich sind (Session, Authentifizierung, Warenkorb), sind ausgenommen. Beachten Sie, dass localStorage und sessionStorage denselben Regeln unterliegen wie Cookies: Ein Tracker, der in den Speicher schreibt, braucht ebenfalls eine Einwilligung.

Die drei Kernpflichten

• Informieren: angeben, welche Cookies wofür und von wem eingesetzt werden, bevor auch nur eines gesetzt wird.
• Wirksame Einwilligung einholen: freiwillig, für den bestimmten Fall, informiert und unmissverständlich. Keine vorausgewählten Kästchen, keine Einwilligung durch Scrollen und eine Ablehnen-Option, die so leicht nutzbar ist wie Akzeptieren.
• Die Entscheidung respektieren: abgelehnte Skripte nicht laden, den Widerruf jederzeit ermöglichen und nach einer angemessenen Zeit erneut fragen. Als Orientierung für die Lebensdauer von Trackern gelten höchstens 13 Monate (siehe unseren Artikel zur 13-Monats-Regel).

Die Besonderheiten von Next.js

Server Components und Client Components

Mit dem App Router (ab Next.js 13) spielt die Grenze zwischen Server und Client Components eine zentrale Rolle:

• Server Components laufen auf dem Server und haben keinen Zugriff auf document.cookie oder localStorage. Den Einwilligungsstatus kennen sie nur über das HTTP-Cookie, das mit der Anfrage gesendet wird.
• Client Components (mit 'use client' markiert) laufen im Browser und können auf Einwilligungsereignisse reagieren.
• Middleware und Route Handlers können das Einwilligungs-Cookie lesen, um das Rendering oder serverseitige Verarbeitungen anzupassen.

Clientseitige Navigation

Eine Next.js-App navigiert per history.pushState, ohne die Seite neu zu laden. Auf einer klassischen Website startet das Banner bei jedem Seitenaufruf neu und blockiert die Tracking-Skripte erneut. In einer Single-Page-App werden Skripte, die nach der ersten Seite eingefügt werden, nicht erneut geprüft, solange sich Ihr Einwilligungstool nicht in die clientseitige Navigation einklinkt.

Das Problem beim Laden von Skripten

Die Komponente next/script bietet mehrere Ladestrategien. Mit strategy="afterInteractive" wird ein Skript geladen, sobald die Seite interaktiv ist, also vor jedem Klick auf das Banner. Ohne vorgeschalteten Einwilligungsmechanismus feuert GA4 oder GTM, bevor das Banner überhaupt erscheint. Das ist der häufigste Verstoß in Next.js-Anwendungen.

Zwei Wege zur Einwilligungsverwaltung

Option 1: eine CMP nutzen (empfohlen)

Eine Consent-Management-Plattform wie FlowConsent übernimmt die Anzeige des Banners, das Einholen der Einwilligung, das vorherige Blockieren von Drittanbieter-Skripten, die Signale von Google Consent Mode v2 und den Einwilligungsnachweis. Übersetzungen und regulatorische Änderungen werden für Sie gepflegt.

Option 2: selbst entwickeln

Ein eigenes Banner lässt sich mit einer React-Komponente und einem globalen Context oder Store umsetzen, doch die Liste der Anforderungen ist lang:

• jedes nicht essenzielle Skript blockieren, auch solche aus GTM oder Drittanbieter-Einbettungen
• die Standardwerte von Consent Mode v2 vor jedem Google-Tag setzen
• die Einwilligung bei jeder clientseitigen Navigation erneut prüfen
• den Einwilligungsnachweis (Zeitstempel, Banner-Version, Auswahl je Kategorie) serverseitig speichern
• die Einwilligung erneuern und Widerrufe verarbeiten
• jede Änderung der Rechtslage und der Vorgaben von Datenschutzkonferenz (DSK) und EDSA selbst verfolgen

FlowConsent in Next.js installieren: Schritt für Schritt

Das FlowConsent-Banner ist ein eigenständiges Skript, für den Browser müssen Sie kein npm-Paket installieren. Das genaue Snippet Ihres Projekts mit Ihrer Deployment-URL und Ihrem Lizenzcode wird unter Builder → Deployment → Integration erzeugt, wo es einen eigenen Tab Next.js gibt. Das vollständige Vorgehen beschreibt der Leitfaden zur Integration in Next.js und React-SPAs. Für eine React-App ohne Next.js (Vite, Create React App, React Router) folgen Sie stattdessen der Installationsanleitung für React.

Schritt 1: das Skript einfügen

• App Router: Fügen Sie in app/layout.tsx das FlowConsent-Skript mit <Script strategy="beforeInteractive"> ein. Mit dieser Strategie lädt Next.js es vor der Hydration, sodass die vorherige Blockierung greift, bevor irgendein Tracker feuert.
• Pages Router: Platzieren Sie in pages/_document.tsx das FlowConsent-<script> als erstes Element in <Head>.

Das Integrations-Snippet enthält außerdem einen Inline-Stub für Google Consent Mode, der denied als Standard registriert. Lassen Sie ihn vor dem Loader stehen. Laden Sie FlowConsent nie aus einer React-Komponente oder einem useEffect heraus: Wenn dieser Code läuft, sind andere Skripte längst ausgeführt.

Schritt 2: den SPA-Modus aktivieren

Öffnen Sie im Builder den Tab Settings, aktivieren Sie SPA Mode und stellen Sie das Banner erneut bereit. FlowConsent fängt dann history.pushState und history.replaceState ab, hört auf popstate und blockiert nicht abgedeckte Tracking-Skripte bei jeder Navigation erneut. Zusätzlich wird ein Ereignis flowconsent:navigation ausgelöst, auf das Sie reagieren können.

Schritt 3: Tracking-Skripte von FlowConsent verwalten lassen

Laden Sie Google Analytics, das Meta-Pixel oder ähnliche Tools nicht über next/script. Deklarieren Sie sie stattdessen unter Builder → Services: Das Banner fügt sie erst ein, wenn die passende Kategorie (Analytics, Marketing, Präferenzen) akzeptiert wurde. Eingebettete Inhalte wie YouTube-iframes lassen sich über ein Attribut data-service an die Einwilligung koppeln.

Dasselbe gilt für @next/third-parties (ab Next.js 14): Die Komponente GoogleAnalytics lädt GA4 über next/script und damit außerhalb der Kontrolle Ihres Einwilligungstools. Soll FlowConsent GA4 steuern, konfigurieren Sie den Dienst im Builder statt über dieses Paket.

Google Consent Mode v2 in Next.js

Google Consent Mode v2 ist seit März 2024 Voraussetzung für Werbetreibende, die Zielgruppen- und Messfunktionen von Google Ads für Nutzer im Europäischen Wirtschaftsraum weiter nutzen wollen. Er übermittelt vier Signale an Google: analytics_storage, ad_storage, ad_user_data und ad_personalization.

FlowConsent setzt ihn ohne Zusatzaufwand um, wie im Leitfaden zu Google Consent Mode beschrieben:

• Ein Inline-Stub registriert für alle vier Signale denied als Standard, bevor ein Google-Tag lädt.
• wait_for_update: 500 gibt dem Banner Zeit, die gespeicherte Entscheidung wiederkehrender Besucher anzuwenden.
• Sobald der Besucher entscheidet, sendet das Banner gtag('consent', 'update', …).
• Nach einer Ablehnung senden Google-Tags nur noch cookielose Pings (gcs=G100), die die Ablehnung respektieren.

Ob Sie GTM oder gtag.js direkt nutzen, die Regel bleibt gleich: Die Standardwerte müssen gesetzt sein, bevor ein Google-Tag initialisiert wird. Die vollständige Methode finden Sie in unserem Implementierungsleitfaden für Google Consent Mode v2.

Die Einwilligung serverseitig auslesen

Ein Teil der Verarbeitung beginnt auf dem Server: Ereignisse über das GA4 Measurement Protocol, CRM-Synchronisierung, Attributionslogik in einem Route Handler, personalisiertes Rendering in einer Server Component. Das Banner kann diese Vorgänge nicht blockieren, daher muss Ihr Code die Einwilligung selbst prüfen.

Das Paket @flowconsent/server-sdk liest das First-Party-Cookie, das das Banner setzt, und liefert eine typisierte Entscheidung. Es hat keine Abhängigkeiten und läuft am Edge (Vercel, Cloudflare Workers) ebenso wie unter Node ab Version 18, also in Middleware, Route Handlers und Server Components. Die Entscheidung lautet standardmäßig abgelehnt, wenn das Cookie fehlt, unlesbar oder veraltet ist. Mit decision.can('analytics') oder decision.can('google-analytics') prüfen Sie, ob eine Kategorie oder ein Dienst erlaubt ist.

Im React-Code auf die Einwilligung reagieren

Für Logik in Client Components löst FlowConsent ein Ereignis flowconsent:consent aus, dessen Objekt detail.preferences die Auswahl des Besuchers je Kategorie enthält. Mit einem kleinen Hook, der dieses Ereignis abonniert, können Sie:

• Ihr eigenes Analytics-Tool nur initialisieren, wenn preferences.analytics true ist
• Komponenten, die von einem Tracker abhängen, erst nach der Einwilligung über next/dynamic laden
• die Oberfläche aktualisieren, wenn ein Besucher seine Meinung ändert

Internationalisierung

Next.js unterstützt i18n-Routing nativ, und Ihr Banner sollte dieselbe Sprache sprechen wie die Seite. In FlowConsent übersetzen Sie die Bannertexte im Tab Translations, die Erkennungsmethode legen Sie unter Information fest. Die Zahl der Sprachen pro Banner hängt vom Tarif ab: 2 im Free-Tarif, 5 in Pro, individuell in Enterprise.

Performance und Core Web Vitals

Das Einwilligungsmanagement sollte Ihre Core Web Vitals nicht verschlechtern:

• Verwenden Sie strategy="beforeInteractive" ausschließlich für das Einwilligungsskript, nie für die blockierten Tracker.
• Blockierte Drittanbieter-Skripte verbrauchen vor der Einwilligung keine Bandbreite, was den ersten Seitenaufruf entlastet.
• Vergleichen Sie den Lighthouse-Score vor und nach der Installation des Banners.

Häufige Fehler

GA4 oder GTM ohne Einwilligungsprüfung laden. Ein next/script mit afterInteractive läuft vor jedem Klick auf das Banner. Überlassen Sie das Einfügen der Tracker der CMP.

Die CMP zu spät laden. Wird das Banner aus einer Komponente oder einem useEffect eingefügt, haben bereits vorhandene Tracker längst gefeuert.

Die clientseitige Navigation vergessen. Ohne SPA-Modus werden Skripte, die nach der ersten Seite hinzukommen, auf späteren Routen nicht erneut blockiert.

Das Meta-Pixel nicht blockieren. Es setzt Werbe-Cookies und muss von der Kategorie Marketing abhängen. Details dazu in unserem Leitfaden zu Meta-Pixel und DSGVO.

Vorausgewählte Kästchen oder passive Einwilligung. Ist die Kategorie Analytics vorausgewählt, ist die Einwilligung unwirksam. Jede nicht essenzielle Kategorie muss abgewählt starten.

Gespeicherten Status mit Nachweis verwechseln. Ein Wert im Cookie oder im localStorage merkt sich die Entscheidung in einem Browser, ist aber kein Nachweis. Der Nachweis ist ein serverseitiger Eintrag mit Zeitstempel, Banner-Version und Auswahl je Kategorie (siehe was Sie als Einwilligungsnachweis speichern sollten).

Nie erneut fragen. Die Einwilligung sollte regelmäßig erneuert werden, und Tracker sollten nicht länger als 13 Monate bestehen.

Kein Widerrufsweg. Besucher müssen ihre Einstellungen jederzeit erneut öffnen können, etwa über einen Link im Footer oder einen schwebenden Button.

Ihre Implementierung testen

1. Öffnen Sie die Live-Website in einem privaten Fenster: Das Banner erscheint auf der ersten Seite.
2. Prüfen Sie in den DevTools unter Network und Application, dass vor Akzeptieren keine Tracking-Anfrage abgeht und kein nicht essenzielles Cookie gesetzt wird, auch nach mehreren Routenwechseln.
3. Bestätigen Sie mit Google Tag Assistant, dass Consent Mode mit denied startet und erst nach der Zustimmung auf granted wechselt.
4. Starten Sie den Einrichtungsassistenten: Er prüft auf Ihrer Live-Seite, ob Stub und Loader vorhanden sind und in der richtigen Reihenfolge stehen.
5. Schließen Sie mit einem Ablehnungs-Scan im Tab Compliance ab: Er lädt Ihre Seiten in einem echten Browser, lehnt die Einwilligung ab und listet alles auf, was trotzdem feuert (Konformitätsprüfung).

Checkliste: Cookie-Konformität für Next.js

• Alle Drittanbieter-Skripte prüfen (next/script, GTM, direkte Imports, @next/third-parties). Unsere Methode für das Cookie-Audit beschreibt das Vorgehen.
• Jedes Cookie einordnen: unbedingt erforderlich, Präferenzen, Analyse, Marketing.
• Das Einwilligungsskript in app/layout.tsx mit beforeInteractive einfügen oder als erstes Element in <Head> von pages/_document.tsx.
• Den SPA-Modus aktivieren und das Banner erneut bereitstellen.
• Tracker in der CMP deklarieren, statt sie mit next/script zu laden.
• Sicherstellen, dass die Standardwerte von Consent Mode v2 vor jedem Google-Tag auf denied stehen.
• Serverseitige Verarbeitung an eine aus der Anfrage gelesene Einwilligungsentscheidung knüpfen.
• Einen Ablehnen-Button anbieten, der so sichtbar ist wie Akzeptieren, ohne vorausgewählte Kästchen.
• Einwilligungsnachweise speichern und die Einwilligung regelmäßig erneuern.
• Auf jeder Seite einen Link zu den Einstellungen bereitstellen.
• Im privaten Fenster und anschließend per Ablehnungs-Scan prüfen.

Fazit

DSGVO-Konformität in einer Next.js-Anwendung lässt sich auf ein Prinzip zurückführen: Kein nicht essenzielles Skript läuft vor der Einwilligung des Besuchers, weder auf der ersten Seite noch bei einer späteren clientseitigen Navigation. Weil Next.js das Einbinden von Trackern so einfach macht, braucht diese Regel einen verlässlichen Mechanismus: ein vor der Hydration geladenes Einwilligungsskript, den SPA-Modus, von der CMP verwaltete Tracker und eine Einwilligungsprüfung auch auf dem Server.

Beginnen Sie damit, Ihre Next.js-Website mit FlowConsent zu scannen, um zu sehen, welche Tracker derzeit ohne Einwilligung laden.