Fungerar det med Pages Router?

Ja. Importera från @katla.app/sdk/react och omslut _app.tsx i stället för app/layout.tsx. Hooks och komponenter är desamma.

Kan jag läsa cookiedata på servern?

Ja: getCachedCookies() och getCachedPolicy() från @katla.app/sdk/next/server körs i Server Components och dedupliceras per rendering. Själva samtyckesbeslutet fattas i webbläsaren, så det läses via useKatlaConsent() och inte på servern.

Hur förhåller det sig till next/third-parties?

De kompletterar varandra. next/third-parties laddar taggarna; Katla avgör om de får laddas, blockerar cookies tills de får det och sparar samtyckesbeviset för beslutet.

Hur fungerar det med i18n-routes?

Skicka locale till providern så kommer de genererade policyerna och cookiebeskrivningarna tillbaka på det språket. Tretton språk stöds, från en-GB till sv-SE.

KATLA FÖR NEXT.JS

Cookiesamtycke för Next.js som respekterar App Router.

Ett typat SDK med provider, hooks och inbyggt Consent Mode v2. Allt du skickar genom providern förblir en Server Component, bannern är din eller vår, och ingenting blockerar renderingen.

Läs Next.js-guiden Börja gratis

@katla.app/sdkApp Router + Pages RouterConsent Mode v2 inbyggt

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>
  )
}

Providern är den enda klientgränsen: children stannar på servernHela guiden →

DÄRFÖR HAR NEXT.JS-WEBBPLATSER SVÅRT MED SAMTYCKE

De flesta samtyckesplattformar byggdes för en script-tagg och en omladdad sida.

PROBLEMETBannern är en iframe från tredje part eller ett globalt skript som hydreringen till slut hamnar i konflikt med.

MED KATLAI stället en React-provider och typade hooks. Samtyckets tillstånd lever i ditt träd och renderar om de komponenter som läser det, som vilket annat tillstånd som helst.

PROBLEMETAnalys och pixlar laddas med next/script innan besökaren har bestämt något.

MED KATLAVillkora dem med useKatlaConsent() och rendera taggen först när dess kategori är tillåten. Signalerna för Consent Mode v2 kommer från samma tillstånd, så de två kan inte säga emot varandra.

PROBLEMETEn hostad banner struntar i dina design tokens, och att ge den ny stil är en kamp mot en stilmall.

MED KATLAHeadless-läget levererar inget gränssnitt alls. Bygg bannern av dina egna komponenter, eller ta CookieBanner: den är ostylad, med stabila katla-*-klassnamn och en render prop.

INSTALLATION

Fyra steg, ett beroende.

Installerapnpm add @katla.app/sdk. Cirka 4 kB överförs i headless-läge.
Omslut layoutenLägg till KatlaNextProvider i app/layout.tsx med ditt webbplats-ID. Den injicerar cookiespärren själv.
Villkora dina skriptLägg analys- och marknadsföringstaggar bakom en kontroll med useKatlaConsent().
Lansera en bannerSläpp in CookieBanner, eller bygg en egen med useConsentManager().

BYGGT FÖR NEXT.JS

Delarna som ett Next.js-team faktiskt behöver.

Prefetch på serverngetCachedCookies() läser cookieförteckningen i en Server Component, deduplicerad med React cache(). Skicka den som initialCookies så gör webbläsaren ingen förfrågan.

Consent Mode v2En enda googleConsentMode-prop styr ad_storage, analytics_storage, ad_user_data och ad_personalization. Nekade som standard, uppdaterade när beslutet fattas.

Klarar streamingInget renderingsblockerande skript och ingen layoutförskjutning. Providern bär "use client"-gränsen så att dina sidor slipper.

Typat hela vägenKategorier, samtyckestillstånd, cookiedata och policyspråk är alla typade. Autokomplettering i stället för en flik med dokumentation.

Byggen utan hämtning vid körningkatla pull skriver förteckningen och spärren till .katla/; getStaticGuardScript() bäddar in spärren direkt i dokumentet. Ingenting hämtas när sidan laddas.

Policyer som komponenterKatlaPolicy renderar den genererade cookie- eller integritetspolicyn, hämtad på servern med getCachedPolicy(), på vilket som helst av 13 språk.

CORE WEB VITALS

Samtycket laddar. Din SEO märker inget.

Ett samtyckesskript är den första tredje parten på varje sida, och därför syns det i Core Web Vitals-rapporten. I headless-läge överför Katla 4 kB, och inbäddat från .katla/ blir det ingen förfrågan alls, så LCP och INP stannar där ditt bygge placerade dem.

Så fungerar headless-läget →

4 kBÖverförtSpärr och samtyckes-API, brotli

0 msTillagd LCPJämfört med samma sida utan den

0LayoutförskjutningBannern reserverar inget utrymme i flödet

2AnropEtt skript, cachat vid kanten

Våra egna mätningar, gjorda 4 september 2026: så gjordes de.

Frågor som Next.js-team ställer

Fungerar det med Pages Router?: Ja. Importera från @katla.app/sdk/react och omslut _app.tsx i stället för app/layout.tsx. Hooks och komponenter är desamma.
Kan jag läsa cookiedata på servern?: Ja: getCachedCookies() och getCachedPolicy() från @katla.app/sdk/next/server körs i Server Components och dedupliceras per rendering. Själva samtyckesbeslutet fattas i webbläsaren, så det läses via useKatlaConsent() och inte på servern.
Hur förhåller det sig till next/third-parties?: De kompletterar varandra. next/third-parties laddar taggarna; Katla avgör om de får laddas, blockerar cookies tills de får det och sparar samtyckesbeviset för beslutet.
Hur fungerar det med i18n-routes?: Skicka locale till providern så kommer de genererade policyerna och cookiebeskrivningarna tillbaka på det språket. Tretton språk stöds, från en-GB till sv-SE.

KATLA FÖR

Katla för React Katla för TypeScript Katla för WordPress Katla för Google Tag Manager Katla för Lovable Katla för Wix Katla för Squarespace Katla för Webflow Katla för Framer Katla för Ghost Katla för HubSpot Katla för Kajabi Katla för Joomla Katla för Shopify (snart)

Lägg till samtycke i din Next.js-app före lunch.

Gratisplanen skannar din Next.js-webbplats och genererar en cookiepolicy, utan kort.

Kom igång gratis