KATLA TIL NEXT.JS
Cookiesamtykke til Next.js, der respekterer App Router.
Et typet SDK med provider, hooks og indbygget Consent Mode v2. Alt, hvad du sender gennem provideren, forbliver en Server Component, banneret er dit eller vores, og intet blokerer renderingen.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 indbygget
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 klientgrænse: children bliver på serverenHele guiden →
DERFOR KÆMPER NEXT.JS-WEBSITES MED SAMTYKKE
De fleste samtykkeplatforme er bygget til et script-tag og en genindlæsning af siden.
PROBLEMETBanneret er en iframe fra en tredjepart eller et globalt script, som hydreringen ender med at slås med.
MED KATLAI stedet en React-provider og typede hooks. Samtykketilstanden lever i dit komponenttræ og får de komponenter, der læser den, til at rendere igen, ligesom al anden state.
PROBLEMETAnalytics og pixels indlæses med next/script, før den besøgende har besluttet noget som helst.
MED KATLAGør dem afhængige af useKatlaConsent(), og render først tagget, når dets kategori er tilladt. Signalerne til Consent Mode v2 kommer fra samme state, så de to kan ikke være uenige.
PROBLEMETEt hostet banner ignorerer dine design tokens, og at restyle det er en kamp mod et stylesheet.
MED KATLAHeadless-tilstand leverer ingen brugerflade overhovedet. Byg banneret af dine egne komponenter, eller tag CookieBanner: den er ustylet, med stabile katla-*-klassenavne og en render prop.
OPSÆTNING
Fire trin, én afhængighed.
- Installerpnpm add @katla.app/sdk. Cirka 4 KB overført i headless-tilstand.
- Pak layoutet indTilføj KatlaNextProvider i app/layout.tsx med dit site-ID. Den indsætter selv cookiespærren.
- Sæt scripts bag samtykkePlacér analytics- og marketingtags bag et tjek med useKatlaConsent().
- Tilføj et bannerSæt CookieBanner ind, eller byg dit eget med useConsentManager().
BYGGET TIL NEXT.JS
De dele, et Next.js-team faktisk har brug for.
Prefetch på serverengetCachedCookies() læser cookieoversigten i en Server Component, deduplikeret med React cache(). Giv den videre som initialCookies, så sender browseren ingen forespørgsel.
Consent Mode v2Én googleConsentMode-prop styrer ad_storage, analytics_storage, ad_user_data og ad_personalization. Afvist som standard og opdateret, når den besøgende vælger.
Klar til streamingIntet renderblokerende script og intet layoutskift. Provideren bærer "use client"-grænsen, så dine sider ikke behøver det.
Typet hele vejenKategorier, samtykketilstand, cookiedata og politikkernes sprogkoder er alle typede. Autocomplete i stedet for en fane med dokumentation.
Build uden hentning ved runtimekatla pull skriver cookieoversigten og spærren ind i .katla/; getStaticGuardScript() indsætter spærren inline i dokumentet. Intet hentes, når siden indlæses.
Politikker som komponenterKatlaPolicy renderer den genererede cookie- eller privatlivspolitik, hentet på serveren med getCachedPolicy(), på et hvilket som helst af 13 sprog.
CORE WEB VITALS
Samtykket indlæses. Din SEO mærker ingenting.
Et samtykkescript er den første tredjepart på hver side, og derfor dukker det op i Core Web Vitals-rapporten. I headless-tilstand fylder Katla 4 KB over nettet, og indsat inline fra .katla/ er det slet ikke en forespørgsel, så LCP og INP bliver, hvor dit build satte dem.
Sådan virker headless-tilstand →4 kBOver nettetCookiespærre og samtykke-API, brotli
0 msEkstra LCPMod den samme side uden
0LayoutskiftBanneret reserverer ingen plads i flowet
2ForespørgselÉt script, cachet på edge
Vores egne målinger, foretaget den : sådan blev de foretaget.
Spørgsmål, som Next.js-teams stiller
- Virker det med Pages Router?
- Ja. Importér fra @katla.app/sdk/react, og pak _app.tsx ind i stedet for app/layout.tsx. Hooks og komponenter er de samme.
- Kan jeg læse cookiedata på serveren?
- Ja. getCachedCookies() og getCachedPolicy() fra @katla.app/sdk/next/server kører i Server Components og deduplikeres pr. rendering. Selve samtykkevalget træffes i browseren, så det læses via useKatlaConsent() og ikke på serveren.
- Hvordan står det i forhold til next/third-parties?
- De supplerer hinanden. next/third-parties indlæser tagsene; Katla afgør, om de må indlæses, blokerer cookiesene, indtil de må, og gemmer registreringen af valget.
- Hvad med i18n-ruter?
- Giv provideren en locale, så kommer de genererede politikker og cookiebeskrivelser tilbage på det sprog. Tretten sprog understøttes, fra en-GB til sv-SE.
Få samtykke ind i din Next.js-app før frokost.
Den gratis plan scanner dit Next.js-website og genererer en cookiepolitik uden betalingskort.