KATLA POUR NEXT.JS
Le consentement aux cookies pour Next.js qui respecte l’App Router.
Un SDK typé avec provider, hooks et Consent Mode v2 intégré. Tout ce que vous passez par le provider reste un Server Component, la bannière est la vôtre ou la nôtre, et rien ne bloque le rendu.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 intégré
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>
)
}Le provider est la seule frontière client : les enfants restent côté serveurGuide complet →
POURQUOI LE CONSENTEMENT COINCE SUR LES SITES NEXT.JS
La plupart des plateformes de consentement ont été conçues pour une balise script et un rechargement de page.
LE PROBLÈMELa bannière est une iframe tierce ou un script global avec lequel l’hydratation finit par se battre.
AVEC KATLAÀ la place, un provider React et des hooks typés. L’état du consentement vit dans votre arbre et fait re-rendre les composants qui le lisent, comme n’importe quel autre état.
LE PROBLÈMELes outils d’analyse et les pixels sont chargés avec next/script avant que le visiteur ait décidé quoi que ce soit.
AVEC KATLAConditionnez-les à useKatlaConsent() et n’affichez la balise qu’une fois sa catégorie autorisée. Les signaux Consent Mode v2 proviennent du même état : les deux ne peuvent pas se contredire.
LE PROBLÈMEUne bannière hébergée ignore vos design tokens, et la restyler revient à se battre contre une feuille de style.
AVEC KATLALe mode headless ne livre aucune interface. Construisez la bannière avec vos propres composants, ou prenez CookieBanner : sans style, avec des noms de classes katla-* stables et une render prop.
INSTALLATION
Quatre étapes, une dépendance.
- Installerpnpm add @katla.app/sdk. Environ 4 Ko transférés en mode headless.
- Envelopper le layoutAjoutez KatlaNextProvider à app/layout.tsx avec votre Site ID. Il injecte lui-même le bloqueur de cookies.
- Conditionner vos scriptsPlacez les balises d’analyse et marketing derrière une vérification useKatlaConsent().
- Livrer une bannièreIntégrez CookieBanner, ou construisez la vôtre avec useConsentManager().
CONÇU POUR NEXT.JS
Ce dont une équipe Next.js a vraiment besoin.
Prefetch côté serveurgetCachedCookies() lit l’inventaire dans un Server Component, dédupliqué avec React cache(). Passez-le en initialCookies et le navigateur n’envoie aucune requête.
Consent Mode v2Une seule prop googleConsentMode pilote ad_storage, analytics_storage, ad_user_data et ad_personalization. Refusés par défaut, mis à jour dès la décision.
Compatible streamingAucun script qui bloque le rendu, aucun décalage de mise en page. Le provider porte la frontière « use client » pour que vos pages n’aient pas à le faire.
Typé de bout en boutCatégories, état du consentement, données des cookies et langues des politiques : tout est typé. L’autocomplétion plutôt qu’un onglet de documentation.
Des builds sans fetch à l’exécutionkatla pull écrit l’inventaire et le bloqueur dans .katla/ ; getStaticGuardScript() intègre le bloqueur directement dans le document. Rien n’est récupéré au chargement de la page.
Des politiques en composantsKatlaPolicy affiche la politique de cookies ou de confidentialité générée, récupérée côté serveur avec getCachedPolicy(), dans l’une des 13 langues.
CORE WEB VITALS
Les cookies s’émiettent. Votre SEO, non.
Un script de consentement est le premier tiers de chaque page, c’est pourquoi il apparaît dans le rapport Core Web Vitals. En mode headless, Katla pèse 4 Ko transférés (et, intégré depuis .katla/, ce n’est même plus une requête) : LCP et INP restent là où votre build les a placés.
Comment fonctionne le mode headless →4 kBTransféréBloqueur et API de consentement, brotli
0 msLCP ajoutéComparé à la même page sans lui
0Décalage de mise en pageLa bannière ne réserve aucun espace dans le flux
2RequêteUn seul script, mis en cache en périphérie
Nos propres mesures, réalisées le : voici comment.
Les questions des équipes Next.js
- Est-ce que ça fonctionne avec le Pages Router ?
- Oui. Importez depuis @katla.app/sdk/react et enveloppez _app.tsx au lieu de app/layout.tsx. Les hooks et les composants sont les mêmes.
- Puis-je lire les données des cookies côté serveur ?
- Oui : getCachedCookies() et getCachedPolicy() de @katla.app/sdk/next/server s’exécutent dans les Server Components et sont dédupliqués à chaque rendu. La décision de consentement, elle, est prise dans le navigateur : elle se lit donc avec useKatlaConsent() plutôt que côté serveur.
- Quelle différence avec next/third-parties ?
- Les deux sont complémentaires. next/third-parties charge les balises ; Katla décide si elles ont le droit de se charger, bloque les cookies tant qu’elles ne l’ont pas, et conserve la preuve de la décision.
- Et les routes i18n ?
- Passez locale au provider, et les politiques générées comme les descriptions des cookies reviennent dans cette langue. Treize langues sont prises en charge, de en-GB à sv-SE.
Ajoutez le consentement à votre app Next.js avant le déjeuner.
L’offre gratuite analyse votre site Next.js et génère une politique de cookies, sans carte bancaire.