> So wird Ihre Next.js-App DSGVO-konform: Tracker vor der Einwilligung blockieren, App Router, SPA-Navigation, Consent Mode v2 und Prüfung am Server. > > Canonical: https://www.flowconsent.com/de/blog/nextjs-cookies-dsgvo-konformitaet [Plattform-Anleitungen](https://www.flowconsent.com/de/blog?category=platforms) # Next.js und DSGVO-Cookies: der vollständige Konformitätsleitfaden Veröffentlicht am 13. Juli 2026 · Aktualisiert am 2. Oktober 2026 · 9 Min. Lesezeit Kurz gesagt Wie Sie in einer Next.js-App eine wirksame Cookie-Einwilligung einholen: von der Installation im App Router über die SPA-Navigation bis zu Google Consent Mode v2 und der serverseitigen Prüfung. ## 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](https://www.flowconsent.com/de/blog/cookie-speicherdauer-dsgvo-13-monate)). ## 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](https://www.flowconsent.com/de/doc/nextjs-integration). Für eine React-App ohne Next.js (Vite, Create React App, React Router) folgen Sie stattdessen der [Installationsanleitung für React](https://www.flowconsent.com/de/doc/install-react). ### Schritt 1: das Skript einfügen - **App Router**: Fügen Sie in `app/layout.tsx` das FlowConsent-Skript mit `