KATLA VOOR NEXT.JS
Cookietoestemming voor Next.js die de App Router respecteert.
Een getypeerde SDK met een provider, hooks en ingebouwde Consent Mode v2. Alles wat je via de provider doorgeeft, blijft een Server Component, de banner is van jou of van ons, en niets blokkeert het renderen.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 ingebouwd
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>
)
}De provider is de enige clientgrens: children blijven op de serverVolledige gids →
WAAROM TOESTEMMING OP NEXT.JS LASTIG IS
De meeste consentplatforms zijn gebouwd voor een scripttag en een pagina die herlaadt.
HET PROBLEEMDe banner is een iframe van een derde partij of een globaal script waar de hydration uiteindelijk mee in gevecht raakt.
MET KATLAIn plaats daarvan een React-provider en getypeerde hooks. De toestemmingsstatus leeft in je componentenboom en rendert de componenten die hem lezen opnieuw, net als elke andere state.
HET PROBLEEMAnalytics en pixels worden met next/script geladen voordat de bezoeker ook maar iets heeft besloten.
MET KATLALaat ze afhangen van useKatlaConsent() en render de tag pas als zijn categorie is toegestaan. De signalen voor Consent Mode v2 komen uit dezelfde state, dus die twee kunnen elkaar niet tegenspreken.
HET PROBLEEMEen gehoste banner negeert je design tokens, en hem restylen is een gevecht met een stylesheet.
MET KATLADe headless modus levert helemaal geen interface. Bouw de banner uit je eigen componenten, of neem CookieBanner: zonder styling, met stabiele katla-*-classnames en een render prop.
INSTALLATIE
Vier stappen, één dependency.
- Installerenpnpm add @katla.app/sdk. In headless modus ongeveer 4 KB over het netwerk.
- Provider in de layoutVoeg KatlaNextProvider met je Site-ID toe aan app/layout.tsx. Hij injecteert de cookieblokker zelf.
- Scripts afschermenZet analytics- en marketingtags achter een controle met useKatlaConsent().
- Banner live zettenPlaats CookieBanner, of bouw je eigen banner met useConsentManager().
GEBOUWD VOOR NEXT.JS
De onderdelen die een Next.js-team echt nodig heeft.
Prefetch op de servergetCachedCookies() leest de inventaris in een Server Component, gededupliceerd met React cache(). Geef hem door als initialCookies en de browser doet geen enkel verzoek.
Consent Mode v2Eén googleConsentMode-prop stuurt ad_storage, analytics_storage, ad_user_data en ad_personalization aan. Standaard geweigerd, bijgewerkt zodra de keuze valt.
Veilig bij streamingGeen render-blokkerend script en geen layoutverschuiving. De provider draagt de "use client"-grens, zodat je pagina’s dat niet hoeven te doen.
Van begin tot eind getypeerdCategorieën, toestemmingsstatus, cookiegegevens en beleidslocales zijn allemaal getypeerd. Autocomplete in plaats van een tabblad met documentatie.
Builds zonder fetch tijdens runtimekatla pull schrijft de inventaris en de cookieblokker naar .katla/; getStaticGuardScript() zet de cookieblokker inline in het document. Bij het laden van de pagina wordt niets opgehaald.
Beleid als componentenKatlaPolicy rendert het gegenereerde cookie- of privacybeleid, op de server opgehaald met getCachedPolicy(), in elk van de 13 talen.
CORE WEB VITALS
Zo brokkelt het koekje af. Jouw SEO niet.
Een consentscript is de eerste derde partij op elke pagina, en daarom duikt het op in het Core Web Vitals-rapport. In headless modus is Katla 4 KB over het netwerk (en inline vanuit .katla/ is het helemaal geen verzoek), dus LCP en INP blijven waar je build ze neerzette.
Zo werkt de headless-modus →4 kBOver het netwerkCookieblokker en toestemmings-API, brotli
0 msExtra LCPTegenover dezelfde pagina zonder Katla
0LayoutverschuivingDe banner reserveert geen ruimte in de paginaflow
2RequestEén script, gecachet aan de edge
Onze eigen metingen, gedaan op (zo hebben we gemeten).
Vragen die Next.js-teams stellen
- Werkt het met de Pages Router?
- Ja. Importeer uit @katla.app/sdk/react en wrap _app.tsx in plaats van app/layout.tsx. De hooks en componenten zijn precies dezelfde.
- Kan ik cookiegegevens op de server lezen?
- Ja: getCachedCookies() en getCachedPolicy() uit @katla.app/sdk/next/server draaien in Server Components en worden per render gededupliceerd. De toestemmingsbeslissing zelf valt in de browser, dus die lees je via useKatlaConsent() en niet op de server.
- Hoe verhoudt dit zich tot next/third-parties?
- Ze vullen elkaar aan. next/third-parties laadt de tags; Katla beslist of ze mogen laden, blokkeert de cookies tot het zover is en legt de beslissing vast.
- En i18n-routes?
- Geef locale door aan de provider en het gegenereerde beleid en de cookiebeschrijvingen komen terug in die taal. Er worden er dertien ondersteund, van en-GB tot sv-SE.
Voeg toestemming toe aan je Next.js-app, nog voor de lunch.
Het gratis abonnement scant je Next.js-site en genereert een cookiebeleid, zonder creditcard.