1Consent × Next.js

Cookie-Consent für deine Next.js-App

Ergänze Consent-Gates in App-Router-Layouts und Seiten und erhalte die Grenzen von Server Components. Steuere Drittanbieter-Markup, ohne jede gerenderte Seite vom Consent-Cookie eines Besuchers abhängig zu machen.

Öffentliche Beta: @1consent/nextjs. Next.js 16 mit React 19+; installiere über den expliziten @beta-Kanal.

Mit Next.js starten Mit deiner KI einrichten

Ein Provider im Root-Layout

import type { ReactNode } from "react";
import { OneConsentProvider } from "@1consent/nextjs";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <OneConsentProvider appId="YOUR_APP_ID">
          {children}
        </OneConsentProvider>
      </body>
    </html>
  );
}

Layout-Auszug: Ergänze generierte Fast-Path-Versionen und Dienst-Gates gemäß Anleitung. Der Provider gehört vor gesteuerte Ressourcen.

Consent an der App-Grenze einrichten

Ordne Layout-Einrichtung, Dienst-Gates und clientseitige Consent-Abfragen den richtigen Next.js-Bereichen zu. Prüfe vorab next/script und andere Anbieter-Einstiegspunkte.

01
Root und Skript-Einstiege prüfen
Finde App-Router-Layout, Drittanbieter-Skripte und vorhandene CMP-Loader. Prüfe Server Components und benötigte Client-Grenzen.
02
Den Next.js-Adapter nutzen
Installiere @1consent/nextjs@beta und ergänze den Provider einmal. Einfaches Gate-Markup kann aus Server Components kommen; useConsent gehört in eine Client Component.
03
Streaming und Navigation testen
Prüfe ein frisches Dokument, gestreamte Inhalte und Client-Navigation. Erhalte Einwilligung und Skriptreihenfolge ohne eine Ausführung vor jedem Paint zu versprechen.

Lass deinen Coding-Assistenten die Einrichtung übernehmen

Verbinde einen Coding-Assistenten mit Zugriff auf dein Next.js-Repository. Er soll die vorhandene Rendering- und Routing-Strategie bei der Integration erhalten.

Prompt für dein Projekt

Integriere 1Consent über den verbundenen MCP in diese Next.js-App. Prüfe App-Router-Layouts, next/script, Anbieter-Initialisierung und vorhandene CMPs. Lies Anleitung und Installationskontext der gewählten App. Nutze @1consent/nextjs@beta, ergänze den Provider einmal, generiere Diensttypen und gate zustimmungspflichtiges Markup. Erhalte Server-Component-Grenzen und Theme. Prüfe Ablehnung, granulare Einwilligung, Widerruf, Streaming und Client-Navigation. Erläutere Auswirkungen serverseitiger Cookie-Abfragen und benenne ungeprüfte Punkte. Frage vor Kontoänderungen oder Veröffentlichung.

Der Assistent ändert dein Projekt. Der MCP liefert App-Kontext und Anleitung. Ein erfolgreicher Tool-Aufruf belegt noch keine wirksame Tracker-Steuerung. Teste die fertige Website.

Verbinde deinen Assistenten mit 1Consent

Verwende diesen Produktions-MCP-Server mit OAuth in einem kompatiblen Coding-Assistenten. Melde dich mit deinem freigeschalteten 1Consent-Konto an und wähle die richtige App. Für die Installation genügen Kontext- und App-Konfigurations-Lesezugriff. Design- und Analysezugriff sind separate Entscheidungen.

URL des Produktions-MCP-Servers

https://mcp.1consent.app/mcp

Dashboard öffnen Anleitung für Verbindung und Zugang Tools fehlen? Verbindung prüfen

Das Theme über Server- und Client-Ansichten abstimmen

Konfiguriere Farben, Typografie und Hell-/Dunkelmodus der Consent-Oberfläche im Dashboard. Deine App behält eigene Styles, Layouts und Server-Component-Grenzen.

Mit gesondert freigegebenem Zugriff kann der gehostete MCP Kunden-Theme-Entwürfe bearbeiten, Frameworks zuweisen und eine private Vorschau mit der echten Laufzeit erstellen. Live-Veröffentlichungen erfordern deine separate Freigabe des konkreten Vorschlags im Dashboard. Prüfe Kontrast, große Schrift, Einstellungen und das tatsächlich ausgelieferte Verhalten in beiden Farbmodi.

Prüfe das Ergebnis auf deiner Website

Prüfe das gerenderte Dokument und Netzwerkverhalten, nicht nur den React-Baum. Cookie-Abfragen in Server Components beeinflussen das Rendering. Optionale Server-Helfer liefern Hinweise und ersetzen keine Consent-Steuerung.

Öffne ein frisches Dokument und lehne optionale Erfassung ab. Layout-Skripte und next/script dürfen Gates nicht umgehen.
Erlaube einen Dienst. Prüfe die Aktivierung des Gates mit konfiguriertem Framework und gültiger gespeicherter Auswahl.
Öffne Einstellungen und widerrufe. Das Dokument darf den Dienst nach dem Neuladen nicht erneut aktivieren.
Prüfe gestreamte Seiten und Client-Navigation, die Abhängigkeitsreihenfolge sowie doppelte CMP- oder Tracker-Initialisierung.

Halte fest, was getestet wurde und was ungeprüft bleibt. Ein sichtbares Banner oder ein erfolgreicher Build allein belegen weder wirksame Tracker-Steuerung noch Rechtskonformität.

Vor der Integration

Kann ich React Server Components behalten?

Ja. Der Next.js-Adapter erhält die Grenzen von Provider und Gates im App Router. useConsent bleibt ein Client-Hook. Die Anleitung beschreibt unterstützte Versionen und Platzierung.

Wird durch Consent jede Route dynamisch?

Die übliche Gate-Einrichtung liest Consent nicht auf dem Server. Optionale Cookie-Helfer haben eigene Auswirkungen auf Rendering und Caching. Ein Server-Cookie-Hinweis ersetzt niemals die clientseitige CMP.

Kann ich stattdessen die Skript-Integration nutzen?

Ja, wenn sie zu Installationsmodus und Trackern passt. Bestimme einen einzigen Verantwortlichen für den CMP-Loader und folge dessen Anleitung. Der Adapter hilft bei expliziten Gates und typisierten Dienstnamen im Komponentenbaum.

Dein nächster Schritt

Einrichtungsanleitung lesen Lovable React