TL;DR
Eine Next.js-Website, die Google Analytics, den Meta-Pixel oder andere Tracking-Tools einbindet, muss vor der Aktivierung dieser Skripte die Einwilligung der Besucher einholen. Das bloße Anzeigen eines Banners reicht nicht aus: Drittanbieter-Skripte müssen bis zur ausdrücklichen Zustimmung blockiert werden, der Nachweis der Einwilligung muss gespeichert werden, und die Google Consent Mode v2-Signale müssen implementiert sein. Dieser Leitfaden erklärt, wie das in einer Next.js-Applikation korrekt umgesetzt wird.
Warum die Cookie-Konformität für eine Next.js-App entscheidend ist
Next.js ist ein React-Framework, das häufig für moderne Webseiten und Applikationen eingesetzt wird und oft auf Plattformen wie Vercel oder Netlify betrieben wird. Seine Flexibilität macht es zur beliebten Wahl für E-Commerce-Shops, SaaS-Produkte und redaktionelle Plattformen.
Genau diese Flexibilität führt dazu, dass Entwickler routinemäßig Dutzende von Drittanbieter-Skripten einbinden: Google Analytics 4, Google Tag Manager, Meta-Pixel, Hotjar, Intercom und viele mehr. Jedes dieser Tools setzt Cookies, die gemäß DSGVO und TTDSG einer vorherigen Einwilligung bedürfen.
Das häufigste Risiko: diese Skripte in _app.tsx oder einer Layout-Komponente ohne jede Einwilligungsprüfung zu laden. Dieses Muster ist weit verbreitet und stellt einen klaren DSGVO-Verstoß dar.
Was die DSGVO für Cookies in einer Next.js-App verlangt
Die DSGVO und das TTDSG verpflichten zu drei Kernpflichten bei nicht essenziellen Cookies: Nutzer klar informieren, Einwilligung vor der Aktivierung von Trackern einholen und den Widerruf ebenso einfach ermöglichen wie die Einwilligung.
Welche Cookies in Next.js eine Einwilligung erfordern
Die überwiegende Mehrheit der in eine Next.js-App eingebundenen Drittanbieter-Tools erfordert eine Einwilligung. Die Hauptkategorien:
- Analyse: Google Analytics 4, Plausible (Standardmodus), Matomo (Standardmodus)
- 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
Technisch notwendige Cookies für den Betrieb der Applikation (Session, Authentifizierung, Warenkorb) sind von der Einwilligungspflicht ausgenommen.
Die 3 Kernpflichten
- Informieren: klar beschreiben, welche Cookies verwendet werden, warum und von wem, bevor sie gesetzt werden.
- Einwilligung einholen: eine freiwillige, spezifische, informierte und eindeutige Einwilligung einholen. Keine vorausgefüllten Kästchen, keine implizite Einwilligung durch Weiterscrollen.
- Entscheidung respektieren: abgelehnte Skripte nicht laden, jederzeitigen Widerruf ermöglichen und die Einwilligung regelmäßig erneuern. Die BfDI und die LfDI der Länder empfehlen, die Gültigkeitsdauer von Einwilligungs-Cookies auf 13 Monate zu begrenzen.
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Wie man eine DSGVO-konforme Cookie-Banner in Next.js implementiert
Es gibt zwei Hauptansätze für das Einwilligungsmanagement in einer Next.js-Applikation: eine dedizierte CMP (Consent Management Platform) einsetzen oder die Lösung selbst entwickeln.
Option 1: eine CMP einsetzen (empfohlener Ansatz)
Eine CMP wie FlowConsent übernimmt automatisch die Anzeige des Banners, die Einwilligung, das Blockieren von Drittanbieter-Skripten und die Übermittlung der Consent Mode v2-Signale. Die Integration in Next.js erfolgt über ein Skript, das in die Head-Komponente eingebunden wird, oder über die Next.js Script-Komponente mit der Strategie beforeInteractive.
Option 2: selbst entwickeln
Eine eigene Einwilligungsbanner-Komponente in Next.js zu entwickeln ist technisch möglich, hat aber erhebliche Einschränkungen: Skript-Blocking, Consent Mode v2-Signale, sichere Speicherung und Erneuerungslogik müssen vollständig selbst implementiert und bei jeder regulatorischen Änderung aktualisiert werden.
Skripte bis zur Einwilligung blockieren
Das grundlegende Muster in Next.js besteht darin, das Laden von Drittanbieter-Skripten an den Einwilligungsstatus zu knüpfen. Die Next.js Script-Komponente mit der Strategie afterInteractive lädt beim Start der Seite, bevor das Banner überhaupt angezeigt wird. Das Laden muss daher an den Einwilligungsstatus geknüpft sein.
Google Consent Mode v2 und Next.js
Google Consent Mode v2 ist seit März 2024 für Werbetreibende, die Google Ads oder GA4 mit Remarketing nutzen, verpflichtend. Er ermöglicht es, Google Einwilligungssignale (analytics_storage, ad_storage, ad_user_data, ad_personalization) zu übermitteln, auch wenn ein Nutzer Cookies ablehnt.
In Next.js kann die Implementierung über Google Tag Manager oder eine direkte gtag.js-Integration erfolgen. In beiden Fällen müssen die Einwilligungssignale vor jeder Google-Tag-Initialisierung gesendet werden.
Unser vollständiger Leitfaden zu Google Consent Mode v2 deckt die technische Implementierung Schritt für Schritt ab, einschließlich GTM-Konfigurationen für moderne JavaScript-Applikationen.
Häufige Fehler bei der Cookie-Compliance in Next.js
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Checkliste für die DSGVO-Cookie-Compliance in Next.js
- Alle Drittanbieter-Skripte in der Applikation auflisten (Next.js Script-Komponente, GTM, direkte Importe).
- Jeden Cookie kategorisieren: technisch notwendig, funktional, analytisch, Marketing.
- Eine CMP oder Einwilligungskomponente einbinden, die nicht essenzielle Skripte standardmäßig blockiert.
- Sicherstellen, dass Drittanbieter-Skripte (GA4, GTM, Meta-Pixel) nur nach ausdrücklicher Einwilligung geladen werden.
- Google Consent Mode v2-Signale implementieren (analytics_storage, ad_storage, ad_user_data, ad_personalization).
- Einwilligung mit Zeitstempel, Banner-Version und kategorienspezifischer Auswahl sicher speichern.
- Automatische Einwilligungserneuerung einrichten.
- Auf allen Seiten einen gut zugänglichen Link zur Einstellungsänderung bereitstellen.
- Banner im privaten Browsermodus testen und prüfen, dass vor der Einwilligung keine nicht essenziellen Cookies gesetzt werden.
- Regelmäßige Cookie-Prüfung mit einem dedizierten Tool durchführen.
Um zu prüfen, welche Cookies Ihre Website aktuell setzt, bietet unser vollständiger Cookie-Audit-Leitfaden die komplette Methode.
Fazit
DSGVO-Konformität in einer Next.js-Applikation folgt einem einfachen Prinzip: Kein nicht essenzielles Skript darf ausgeführt werden, bevor der Nutzer eingewilligt hat. Die Flexibilität von Next.js erleichtert die Integration von Trackern, erfordert aber zugleich ständige Aufmerksamkeit dafür, was wann geladen wird.
Die zuverlässigste Lösung ist eine dedizierte CMP, die Skript-Blocking, Consent Mode v2-Signale und den Einwilligungsnachweis automatisch übernimmt. Beginnen Sie damit, Ihre Next.js-Website auf FlowConsent zu scannen, um genau zu ermitteln, welche Tracker einer Anpassung bedürfen.
Häufig gestellte Fragen
Braucht eine Next.js-Website einen Cookie-Banner, auch wenn sie nur Google Analytics verwendet?
Ja. Google Analytics 4 setzt Analyse-Cookies, die für den Betrieb der Website nicht technisch notwendig sind. Nach DSGVO und TTDSG ist für das Setzen dieser Cookies eine vorherige Einwilligung erforderlich. Die Verwendung von Next.js als Framework ändert daran nichts.
Wie blockiert man Google Tag Manager in Next.js vor der Einwilligung?
Der zuverlässigste Ansatz ist, GTM bedingt auf Basis eines globalen Einwilligungsstatus zu laden (React Context oder Store). Die Next.js Script-Komponente mit strategy='afterInteractive' muss bedingt gerendert werden: Die Komponente wird erst gemountet, wenn der Nutzer für die betreffenden Kategorien eingewilligt hat. Eine dedizierte CMP übernimmt diese Logik automatisch.
Kann Plausible oder Matomo in Next.js ohne Cookie-Banner verwendet werden?
Unter bestimmten Bedingungen ist das möglich. Plausible Analytics setzt standardmäßig keine Cookies und kann von der Einwilligungspflicht befreit sein, wenn es ohne Nutzeridentifikation konfiguriert ist. Matomo kann befreit werden, wenn IP-Anonymisierung aktiviert ist und keine Daten an Dritte weitergegeben werden, gemäß den Anforderungen der deutschen Datenschutzbehörden. Prüfen Sie die genaue Konfiguration des Tools, bevor Sie eine Befreiung beanspruchen.
Wie lange darf ein Einwilligungs-Cookie in einer Next.js-App maximal gültig sein?
Datenschutzbehörden empfehlen in der Regel, dass der Cookie zur Speicherung der Nutzereinwilligung 13 Monate nicht überschreiten sollte. Danach gilt die Einwilligung als abgelaufen und muss neu eingeholt werden. Die Applikation sollte spätestens nach 6 bis 13 Monaten eine erneute Einwilligung anfordern.