KATLA PER NEXT.JS
Il consenso ai cookie per Next.js che rispetta l’App Router.
Un SDK tipizzato con provider, hook e Consent Mode v2 integrati. Tutto ciò che passi attraverso il provider resta un Server Component, il banner è tuo o nostro, e nulla blocca il rendering.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 integrato
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>
)
}Il provider è l’unico confine lato client: i componenti figli restano sul serverGuida completa →
PERCHÉ I SITI NEXT.JS FATICANO CON IL CONSENSO
Quasi tutte le piattaforme di consenso sono nate per un tag script e un ricaricamento di pagina.
IL PROBLEMAIl banner è un iframe di terze parti o uno script globale con cui l’hydration finisce per scontrarsi.
CON KATLAAl loro posto, un provider React e hook tipizzati. Lo stato del consenso vive nel tuo albero e ri-renderizza i componenti che lo leggono, come qualsiasi altro stato.
IL PROBLEMAAnalytics e pixel vengono caricati con next/script prima che il visitatore abbia deciso qualcosa.
CON KATLASubordinali a useKatlaConsent() e renderizza il tag solo quando la sua categoria è consentita. I segnali di Consent Mode v2 derivano dallo stesso stato, quindi i due non possono divergere.
IL PROBLEMAUn banner ospitato ignora i tuoi design token, e cambiargli stile significa fare a pugni con un foglio di stile.
CON KATLALa modalità headless non include alcuna interfaccia. Costruisci il banner con i tuoi componenti, oppure usa CookieBanner: è senza stili, con nomi di classe katla-* stabili e una render prop.
CONFIGURAZIONE
Quattro passaggi, una dipendenza.
- Installapnpm add @katla.app/sdk. Circa 4 KB trasferiti in modalità headless.
- Avvolgi il layoutAggiungi KatlaNextProvider ad app/layout.tsx con il tuo Site ID. Inserisce da solo il blocco dei cookie.
- Subordina i tuoi scriptMetti i tag di analytics e marketing dietro un controllo con useKatlaConsent().
- Pubblica un bannerInserisci CookieBanner, oppure costruisci il tuo con useConsentManager().
PENSATO PER NEXT.JS
Le parti di cui un team Next.js ha davvero bisogno.
Prefetch lato servergetCachedCookies() legge l’inventario in un Server Component, deduplicato con React cache(). Passalo come initialCookies e il browser non fa alcuna richiesta.
Consent Mode v2Una sola prop googleConsentMode governa ad_storage, analytics_storage, ad_user_data e ad_personalization. Negati per impostazione predefinita, aggiornati alla decisione.
Compatibile con lo streamingNessuno script che blocca il rendering e nessuno spostamento del layout. Il provider si fa carico del confine "use client", così le tue pagine non devono farlo.
Tipizzato da cima a fondoCategorie, stato del consenso, dati dei cookie e lingue delle policy sono tutti tipizzati. L’autocompletamento al posto di una scheda aperta sulla documentazione.
Build senza fetch a runtimekatla pull scrive l’inventario e il blocco dei cookie in .katla/; getStaticGuardScript() lo inserisce inline nel documento. Al caricamento della pagina non viene scaricato nulla.
Policy come componentiKatlaPolicy renderizza la cookie policy o l’informativa sulla privacy generata, recuperata sul server con getCachedPolicy(), in una qualsiasi delle 13 lingue.
CORE WEB VITALS
I cookie si sbriciolano. La tua SEO no.
Uno script di consenso è la prima terza parte su ogni pagina, ed è per questo che compare nel report Core Web Vitals. In modalità headless Katla pesa 4 KB trasferiti, e inserito inline da .katla/ non è nemmeno una richiesta, così LCP e INP restano dove li ha lasciati la tua build.
Come funziona la modalità headless →4 kBDati trasferitiBlocco dei cookie e API di consenso, brotli
0 msLCP aggiuntoRispetto alla stessa pagina senza
0Spostamento del layoutIl banner non riserva spazio nel flusso
2RichiestaUn solo script, in cache all’edge
Nostre misurazioni, effettuate il : ecco come le abbiamo fatte.
Le domande dei team Next.js
- Funziona con il Pages Router?
- Sì. Importa da @katla.app/sdk/react e avvolgi _app.tsx invece di app/layout.tsx. Hook e componenti sono gli stessi.
- Posso leggere i dati dei cookie sul server?
- Sì: getCachedCookies() e getCachedPolicy() da @katla.app/sdk/next/server girano nei Server Component e sono deduplicati a ogni render. La decisione sul consenso invece si prende nel browser, quindi si legge con useKatlaConsent() e non sul server.
- Che differenza c’è con next/third-parties?
- Sono complementari. next/third-parties carica i tag; Katla decide se possono caricarsi, blocca i cookie finché non possono e conserva la registrazione della decisione.
- E le route i18n?
- Passa locale al provider e le policy generate e le descrizioni dei cookie arrivano in quella lingua. Ne sono supportate tredici, da en-GB a sv-SE.
Aggiungi il consenso alla tua app Next.js prima di pranzo.
Il piano gratuito scansiona il tuo sito Next.js e genera un’informativa sui cookie, senza carta di credito.