KATLA PARA NEXT.JS
Consentimiento de cookies para Next.js que respeta el App Router.
Un SDK tipado con provider, hooks y Consent Mode v2 integrado. Todo lo que pasas a través del provider sigue siendo un Server Component, el banner es tuyo o nuestro, y nada bloquea el renderizado.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 integrado
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>
)
}El provider es el único límite de cliente: los children se quedan en el servidorGuía completa →
POR QUÉ A LOS SITIOS DE NEXT.JS LES CUESTA EL CONSENTIMIENTO
La mayoría de las plataformas de consentimiento se hicieron para una etiqueta script y una recarga de página.
EL PROBLEMAEl banner es un iframe de terceros o un script global con el que la hidratación acaba peleándose.
CON KATLAEn su lugar, un provider de React y hooks tipados. El estado del consentimiento vive en tu árbol y vuelve a renderizar los componentes que lo leen, como cualquier otro estado.
EL PROBLEMALa analítica y los píxeles se cargan con next/script antes de que el visitante haya decidido nada.
CON KATLACondiciónalos a useKatlaConsent() y renderiza la etiqueta solo cuando su categoría esté concedida. Las señales de Consent Mode v2 salen del mismo estado, así que no pueden contradecirse.
EL PROBLEMAUn banner alojado ignora tus design tokens, y cambiarle el estilo es pelearse con una hoja de estilos.
CON KATLAEl modo headless no incluye ninguna interfaz. Construye el banner con tus propios componentes, o usa CookieBanner: viene sin estilos, con nombres de clase katla-* estables y un render prop.
CONFIGURACIÓN
Cuatro pasos, una dependencia.
- Instalarpnpm add @katla.app/sdk. Unos 4 KB transferidos en modo headless.
- Envolver el layoutAñade KatlaNextProvider a app/layout.tsx con el ID de tu sitio. El propio provider inyecta el bloqueador de cookies.
- Condicionar los scriptsPon las etiquetas de analítica y de marketing detrás de una comprobación con useKatlaConsent().
- Lanzar un bannerAñade CookieBanner, o construye el tuyo con useConsentManager().
HECHO PARA NEXT.JS
Las piezas que un equipo de Next.js necesita de verdad.
Prefetch en el servidorgetCachedCookies() lee el inventario en un Server Component, deduplicado con cache() de React. Pásalo como initialCookies y el navegador no hace ninguna petición.
Consent Mode v2Una sola prop googleConsentMode controla ad_storage, analytics_storage, ad_user_data y ad_personalization. Denegadas por defecto, actualizadas con la decisión.
Compatible con streamingNingún script que bloquee el renderizado y ningún desplazamiento del diseño. El provider lleva la frontera "use client" para que tus páginas no tengan que hacerlo.
Tipado de principio a finCategorías, estado del consentimiento, datos de cookies y locales de las políticas: todo está tipado. Autocompletado en lugar de una pestaña con la documentación.
Builds sin peticiones en tiempo de ejecuciónkatla pull escribe el inventario y el bloqueador en .katla/; getStaticGuardScript() incrusta el bloqueador en el documento. No se descarga nada al cargar la página.
Políticas como componentesKatlaPolicy renderiza la política de cookies o de privacidad generada, obtenida en el servidor con getCachedPolicy(), en cualquiera de 13 idiomas.
CORE WEB VITALS
Las galletas se desmoronan. Tu SEO, no.
Un script de consentimiento es el primer script de terceros en cada página, y por eso aparece en el informe de Core Web Vitals. En modo headless, Katla son 4 KB transferidos (e incrustado desde .katla/ ni siquiera es una petición), así que el LCP y el INP se quedan donde los dejó tu build.
Cómo funciona el modo headless →4 kBTransferidoBloqueador y API de consentimiento, brotli
0 msLCP añadidoFrente a la misma página sin él
0Desplazamiento de diseñoEl banner no reserva espacio en el flujo
2PeticiónUn script, en caché en el edge
Mediciones propias, realizadas el : así se hicieron.
Lo que preguntan los equipos de Next.js
- ¿Funciona con el Pages Router?
- Sí. Importa desde @katla.app/sdk/react y envuelve _app.tsx en lugar de app/layout.tsx. Los hooks y los componentes son los mismos.
- ¿Puedo leer los datos de cookies en el servidor?
- Sí: getCachedCookies() y getCachedPolicy() de @katla.app/sdk/next/server se ejecutan en Server Components y se deduplican en cada renderizado. La decisión de consentimiento en sí se toma en el navegador, así que se lee con useKatlaConsent() y no en el servidor.
- ¿Cómo se compara con next/third-parties?
- Se complementan. next/third-parties carga las etiquetas; Katla decide si pueden cargarse, bloquea las cookies hasta que puedan y guarda el registro de la decisión.
- ¿Y las rutas con i18n?
- Pasa locale al provider y las políticas generadas y las descripciones de las cookies llegan en ese idioma. Hay trece disponibles, de en-GB a sv-SE.
Añade el consentimiento a tu app de Next.js antes de comer.
El plan gratuito escanea tu sitio de Next.js y genera una política de cookies, sin tarjeta.