KATLA FOR NEXT.JS
Cookiesamtykke for Next.js som respekterer App Router.
Et typet SDK med provider, hooks og innebygd Consent Mode v2. Alt du sender gjennom provideren, forblir en Server Component, banneret er ditt eller vårt, og ingenting blokkerer rendringen.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 innebygd
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>
)
}Provideren er den eneste klientgrensen: children blir værende på serverenHele guiden →
HVORFOR NEXT.JS-NETTSTEDER SLITER MED SAMTYKKE
De fleste samtykkeplattformer ble laget for en skripttagg og en sideoppdatering.
PROBLEMETBanneret er en iframe fra en tredjepart eller et globalt skript som hydreringen ender opp med å slåss mot.
MED KATLAHer får du i stedet en React-provider og typede hooks. Samtykketilstanden lever i treet ditt og rendrer komponentene som leser den, på nytt, som all annen state.
PROBLEMETAnalyse og piksler lastes med next/script før den besøkende har bestemt seg for noe som helst.
MED KATLAGjør dem avhengige av useKatlaConsent(), og rendre taggen først når kategorien er tillatt. Signalene til Consent Mode v2 kommer fra den samme tilstanden, så de to kan ikke være uenige.
PROBLEMETEt hostet banner ignorerer design-tokenene dine, og å style det om er en kamp mot et stilark.
MED KATLAHeadless-modus leverer ikke noe grensesnitt i det hele tatt. Bygg banneret av dine egne komponenter, eller ta CookieBanner: det er ustylet, med stabile katla-*-klassenavn og en render prop.
OPPSETT
Fire steg, én avhengighet.
- Installerpnpm add @katla.app/sdk. Omtrent 4 KB overført i headless-modus.
- Pakk inn layoutenLegg KatlaNextProvider med din Site ID inn i app/layout.tsx. Den setter inn cookie-vakten selv.
- Legg skriptene bak samtykkeLegg analyse- og markedsføringstagger bak en sjekk med useKatlaConsent().
- Lanser et bannerSett inn CookieBanner, eller bygg ditt eget med useConsentManager().
BYGGET FOR NEXT.JS
Delene et Next.js-team faktisk trenger.
Prefetch på serverengetCachedCookies() leser cookie-oversikten i en Server Component, deduplisert med React cache(). Send den inn som initialCookies, så gjør nettleseren ingen forespørsel.
Consent Mode v2Én googleConsentMode-prop styrer ad_storage, analytics_storage, ad_user_data og ad_personalization. Avslått som standard, oppdatert når valget er tatt.
Trygg med streamingIngen skript som blokkerer rendringen, og ingen layoutforskyvning. Provideren bærer "use client"-grensen, så sidene dine slipper.
Typet fra ende til endeKategorier, samtykketilstand, cookie-data og språkene for erklæringene er typet. Autofullføring i stedet for en fane med dokumentasjon.
Bygg uten henting under kjøringkatla pull skriver oversikten og vakten til .katla/, og getStaticGuardScript() legger vakten inline i dokumentet. Ingenting hentes når siden lastes.
Erklæringer som komponenterKatlaPolicy rendrer den genererte cookie-erklæringen eller personvernerklæringen, hentet på serveren med getCachedPolicy(), på hvilket som helst av 13 språk.
CORE WEB VITALS
Samtykket lastes inn. SEO-en din merker ingenting.
Et samtykkeskript er den første tredjeparten på hver side, og derfor dukker det opp i Core Web Vitals-rapporten. I headless-modus er Katla 4 KB overført, og lagt inline fra .katla/ er det ingen forespørsel i det hele tatt, så LCP og INP blir der bygget ditt satte dem.
Slik fungerer headless-modus →4 kBOver nettetCookie-vakt og samtykke-API, brotli
0 msEkstra LCPMot den samme siden uten Katla
0LayoutforskyvningBanneret reserverer ingen plass i flyten
2ForespørselEtt skript, bufret i edge-nettverket
Våre egne målinger, gjort (slik ble de gjort).
Spørsmål Next.js-team stiller
- Fungerer det med Pages Router?
- Ja. Importer fra @katla.app/sdk/react, og pakk inn _app.tsx i stedet for app/layout.tsx. Hooks og komponenter er de samme.
- Kan jeg lese cookie-data på serveren?
- Ja. getCachedCookies() og getCachedPolicy() fra @katla.app/sdk/next/server kjører i Server Components og dedupliseres per rendring. Selve samtykkevalget tas i nettleseren, så det leses via useKatlaConsent() og ikke på serveren.
- Hvordan står dette seg mot next/third-parties?
- De utfyller hverandre. next/third-parties laster taggene; Katla avgjør om de får lov til å laste, blokkerer informasjonskapslene (cookies) til de får det, og tar vare på registreringen av valget.
- Hva med i18n-ruter?
- Send locale til provideren, så kommer de genererte erklæringene og cookie-beskrivelsene tilbake på det språket. Tretten språk støttes, fra en-GB til sv-SE.
Legg til samtykke i Next.js-appen din før lunsj.
Gratisplanen skanner ditt Next.js-nettsted og genererer en cookie-erklæring, uten kort.