Consentimiento de cookies para Next.js,
con un comando

Una app Next.js no tiene capa de consentimiento. next/script carga GA4 o el píxel de Meta en cuanto la página se hidrata, y cada visitante de la UE es rastreado antes de haber dicho nada.

La norma es la misma en toda la UE y en el Reino Unido: nada más allá de lo estrictamente necesario puede almacenarse en el dispositivo de un visitante ni leerse de él antes de que haya dado su consentimiento. Es el artículo 5(3) de la Directiva ePrivacy, y ese consentimiento debe cumplir la definición del RGPD: libre, específico, informado e inequívoco, con un rechazo tan fácil como la aceptación. El Reino Unido mantiene la misma norma en PECR, con exenciones limitadas para estadísticas de bajo riesgo desde el 5 de febrero de 2026. California y las demás leyes estatales de EE. UU. funcionan al revés: sin opt-in, pero con un enlace de opt-out y soporte para la señal Global Privacy Control.

De ahí se derivan tres cosas para un sitio web. Los scripts de analítica, publicidad y redes sociales tienen que esperar una decisión. La decisión tiene que registrarse de forma que puedas demostrarla después, porque el artículo 7(1) pone la carga de la prueba sobre ti. Y retirar el consentimiento tiene que ser tan fácil como darlo, lo que exige un control que vuelva a abrir el banner en cada página. Un banner que muestra dos botones y carga Google Analytics de todos modos suspende la primera prueba, y ese es justo el fallo que las autoridades están sancionando, desde las decisiones de la CNIL contra Google y SHEIN hasta las inspecciones de las autoridades neerlandesa y belga.

Next.js te da exactamente un buen lugar para un runtime de consentimiento: una etiqueta next/script con strategy="beforeInteractive". Los scripts con esa estrategia se inyectan en el HTML inicial y se ejecutan antes de cualquier hidratación, el único momento suficientemente temprano. afterInteractive (el valor por defecto) se ejecuta tras la hidratación, cuando un gestor de etiquetas añadido con la misma estrategia puede haberse disparado ya. lazyOnload es aún peor.

En el App Router la etiqueta va en app/layout.tsx, que envuelve cada ruta. En el Pages Router va en pages/_document.tsx. La CLI detecta cuál usas e imprime el snippet correcto; @cookiecrumbs/next envuelve la etiqueta como componente y añade helpers de servidor, de modo que un Server Component o un route handler puede leer la cookie de consentimiento y decidir qué renderizar antes de que se ejecute el cliente.

A partir de ahí, bloquear es cuestión de categoría. Una etiqueta de terceros pasa a ser type="text/plain" con data-cc-category; un subárbol de React que carga un rastreador va dentro de ConsentGate. El runtime libera ambos cuando se concede la categoría, en el orden del documento, así que un contenedor de GTM que espera a analítica se ejecuta exactamente como lo habría hecho, solo que más tarde. Todo lo que el escaneo encontró en tu dominio de producción se compila en un mapa de bloqueo al publicar, de modo que los scripts sin etiquetar cuyo host es conocido también se neutralizan in situ.

Los sitios Next.js suelen llevar Google Ads o GA4 a través de GTM, añadido con afterInteractive. Con el runtime de consentimiento primero, esas etiquetas cargan con los valores por defecto correctos sin cambios de código por tu parte.

Google Consent Mode v2 es la capa de señales entre el banner y las etiquetas de Google. Antes de que se ejecute cualquier etiqueta, siete señales (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) se fijan en «denied» para los visitantes del EEE, el Reino Unido y Suiza. En cuanto alguien elige, el runtime las actualiza y las etiquetas de Google se ajustan. Desde el 15 de junio de 2026 Google usa ad_storage como señal determinante para los datos de Ads, así que acertar con el valor por defecto importa más que antes.

CookieCrumbs fija los valores por defecto de forma síncrona, antes que cualquier gestor de etiquetas, los actualiza con cada decisión e incluye una plantilla de Google Tag Manager para que los activadores de consentimiento existan sin listeners escritos a mano. En modo avanzado, los pings sin cookies de Google mantienen las conversiones modeladas para los visitantes que dijeron que no. Lo que no hace es fingir ser una CMP certificada por Google: para AdSense, Ad Manager o AdMob en el EEE sigues necesitando una con IAB TCF, y CookieCrumbs hoy no lo es.