KATLA FÜR NEXT.JS
Cookie-Einwilligung für Next.js, die den App Router respektiert.
Ein typisiertes SDK mit Provider, Hooks und integriertem Consent Mode v2. Alles, was Sie durch den Provider reichen, bleibt eine Server Component, das Banner ist Ihres oder unseres, und nichts blockiert das Rendering.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 integriert
app/layout.tsxApp Router
import { KatlaNextProvider } from '@katla.app/sdk/next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<KatlaNextProvider siteId="your-site-id" googleConsentMode>
{children}
</KatlaNextProvider>
</body>
</html>
)
}Der Provider ist die einzige Client-Boundary: Children bleiben auf dem ServerVollständige Anleitung →
WARUM NEXT.JS-WEBSITES MIT DER EINWILLIGUNG KÄMPFEN
Die meisten Consent-Plattformen wurden für ein Script-Tag und einen Seiten-Reload gebaut.
DAS PROBLEMDas Banner ist ein iframe eines Drittanbieters oder ein globales Skript, mit dem sich die Hydration am Ende anlegt.
MIT KATLAStattdessen ein React-Provider und typisierte Hooks. Der Einwilligungsstatus lebt in Ihrem Baum und rendert die Komponenten neu, die ihn lesen, wie jeder andere State auch.
DAS PROBLEMAnalytics und Pixel werden mit next/script geladen, bevor der Besucher irgendetwas entschieden hat.
MIT KATLAKnüpfen Sie sie an useKatlaConsent() und rendern Sie das Tag erst, wenn seine Kategorie erlaubt ist. Die Signale für Consent Mode v2 kommen aus demselben State, die beiden können sich also nicht widersprechen.
DAS PROBLEMEin gehostetes Banner ignoriert Ihre Design-Tokens, und es umzugestalten ist ein Kampf mit einem Stylesheet.
MIT KATLADer Headless-Modus liefert überhaupt keine Oberfläche. Bauen Sie das Banner aus Ihren eigenen Komponenten, oder nehmen Sie CookieBanner: ungestylt, mit stabilen katla-*-Klassennamen und einem Render-Prop.
EINRICHTUNG
Vier Schritte, eine Abhängigkeit.
- Installierenpnpm add @katla.app/sdk. Im Headless-Modus werden etwa 4 KB übertragen.
- Layout umschließenFügen Sie KatlaNextProvider mit Ihrer Site-ID in app/layout.tsx ein. Er bindet den Cookie-Guard selbst ein.
- Skripte absichernSetzen Sie Analytics- und Marketing-Tags hinter eine Prüfung mit useKatlaConsent().
- Banner ausliefernSetzen Sie CookieBanner ein, oder bauen Sie Ihr eigenes mit useConsentManager().
GEBAUT FÜR NEXT.JS
Die Teile, die ein Next.js-Team wirklich braucht.
Serverseitiges PrefetchinggetCachedCookies() liest das Inventar in einer Server Component, dedupliziert mit React cache(). Übergeben Sie es als initialCookies, und der Browser stellt keine Anfrage.
Consent Mode v2Ein einziges googleConsentMode-Prop steuert ad_storage, analytics_storage, ad_user_data und ad_personalization. Standardmäßig verweigert, mit der Entscheidung aktualisiert.
Streaming-sicherKein render-blockierendes Skript und kein Layout Shift. Der Provider trägt die "use client"-Grenze, damit Ihre Seiten das nicht müssen.
Durchgehend typisiertKategorien, Einwilligungsstatus, Cookie-Daten und Richtlinien-Locales sind alle typisiert. Autovervollständigung statt eines offenen Docs-Tabs.
Builds ohne Laufzeit-Fetchkatla pull schreibt das Inventar und den Guard nach .katla/, getStaticGuardScript() bettet den Guard inline ins Dokument ein. Beim Laden der Seite wird nichts abgerufen.
Richtlinien als KomponentenKatlaPolicy rendert die generierte Cookie-Richtlinie oder Datenschutzerklärung, serverseitig abgerufen mit getCachedPolicy(), in jeder von 13 Sprachen.
CORE WEB VITALS
So krümelt der Keks. Ihr SEO bitte nicht.
Ein Consent-Skript ist der erste Drittanbieter auf jeder Seite, deshalb taucht es im Bericht zu den Core Web Vitals auf. Im Headless-Modus überträgt Katla 4 KB, und inline aus .katla/ ist es gar keine Anfrage. LCP und INP bleiben also dort, wo Ihr Build sie hingebracht hat.
So funktioniert der Headless-Modus →4 kBÜbertragenGuard und Consent-API, Brotli
0 msZusätzlicher LCPGegenüber derselben Seite ohne Katla
0Layout-ShiftDas Banner reserviert keinen Platz im Seitenfluss
2RequestEin Skript, am Edge gecacht
Unsere eigenen Messungen vom : so wurden sie erhoben.
Was Next.js-Teams fragen
- Funktioniert es mit dem Pages Router?
- Ja. Importieren Sie aus @katla.app/sdk/react und umschließen Sie _app.tsx statt app/layout.tsx. Hooks und Komponenten sind dieselben.
- Kann ich Cookie-Daten auf dem Server lesen?
- Ja: getCachedCookies() und getCachedPolicy() aus @katla.app/sdk/next/server laufen in Server Components und werden pro Render dedupliziert. Die Einwilligungsentscheidung selbst fällt im Browser, deshalb wird sie über useKatlaConsent() gelesen und nicht auf dem Server.
- Wie verhält sich das zu next/third-parties?
- Die beiden ergänzen sich. next/third-parties lädt die Tags, Katla entscheidet, ob sie laden dürfen, blockiert die Cookies, bis es so weit ist, und führt den Nachweis über die Entscheidung.
- Was ist mit i18n-Routen?
- Übergeben Sie locale an den Provider, und die generierten Richtlinien und Cookie-Beschreibungen kommen in dieser Sprache zurück. Dreizehn werden unterstützt, von en-GB bis sv-SE.
Cookie-Einwilligung in Ihrer Next.js-App, noch vor der Mittagspause.
Der kostenlose Tarif scannt Ihre Next.js-Website und erstellt eine Cookie-Richtlinie, ohne Karte.