Next.js y cookies RGPD: guía completa de cumplimiento

En resumen

Un sitio Next.js que carga Google Analytics, el Meta Pixel o cualquier otro rastreador debe obtener el consentimiento de los visitantes antes de que esos scripts se ejecuten, como exigen el RGPD y el artículo 22.2 de la LSSI. Mostrar un banner no basta: los scripts no esenciales deben quedar bloqueados hasta que el usuario acepte de forma explícita, las señales de Google Consent Mode v2 tienen que arrancar en denied, la elección debe respetarse en cada navegación del lado del cliente y necesita una prueba de cada consentimiento. Esta guía repasa los requisitos legales, las particularidades de Next.js (App Router, Server Components, navegación SPA, SSR) y una implementación paso a paso.

Por qué el cumplimiento de cookies es crítico en una app Next.js

Next.js es un framework de React muy utilizado para webs de marketing, tiendas online, productos SaaS y medios digitales, a menudo desplegados en Vercel o Netlify. Su flexibilidad es también su principal riesgo de cumplimiento: es habitual añadir Google Analytics 4, Google Tag Manager, el Meta Pixel, Hotjar, Intercom y otras herramientas, y todas instalan cookies o rastreadores equivalentes que requieren consentimiento previo.

El error más frecuente es cargar esos scripts en _app.tsx, app/layout.tsx o un componente Layout compartido sin comprobar el consentimiento. Este patrón está muy extendido y supone una infracción clara del RGPD: los rastreadores se disparan en la primera página vista, antes de que el visitante haya podido elegir.

Las consecuencias son reales. Las autoridades europeas han impuesto multas de decenas de millones de euros a grandes sitios por incumplimientos con las cookies, la AEPD sanciona con regularidad banners defectuosos, las reclamaciones de organizaciones como noyb son frecuentes y un banner que no hace lo que promete daña la confianza de los usuarios.

Qué exigen el RGPD y la LSSI para las cookies en Next.js

Para las cookies no esenciales hay tres obligaciones básicas: informar con claridad, obtener el consentimiento antes de activar los rastreadores y permitir retirarlo con la misma facilidad con la que se dio.

Qué cookies necesitan consentimiento

La mayoría de las herramientas de terceros integradas en una app Next.js lo necesitan:

• Analítica: Google Analytics 4, y también Matomo o Plausible cuando no están configurados para quedar exentos
• Publicidad y marketing: Meta Pixel, LinkedIn Insight Tag, Google Ads, TikTok Pixel
• Experiencia de usuario: Hotjar, FullStory, LogRocket, Microsoft Clarity
• Soporte y chat: Intercom, Drift, HubSpot Chat

Las cookies estrictamente necesarias para que la aplicación funcione (sesión, autenticación, carrito) están exentas. Tenga en cuenta que localStorage y sessionStorage siguen las mismas reglas que las cookies: un rastreador que escribe en el almacenamiento local también necesita consentimiento.

Las tres obligaciones básicas

• Informar: explicar qué cookies se usan, para qué y quién las instala, antes de instalar ninguna.
• Obtener un consentimiento válido: libre, específico, informado e inequívoco. Sin casillas premarcadas, sin consentimiento implícito por desplazamiento y con un botón Rechazar tan fácil de usar como Aceptar.
• Respetar la elección: no cargar los scripts rechazados, permitir la retirada en cualquier momento y volver a preguntar tras un plazo razonable. Como referencia, la vida de los rastreadores no debería superar los 13 meses (consulte nuestra guía sobre la regla de los 13 meses).

Las particularidades de Next.js

Server Components y Client Components

Con el App Router (Next.js 13 y posteriores), la frontera entre Server y Client Components es clave para el consentimiento:

• Server Components: se ejecutan en el servidor y no tienen acceso a document.cookie ni a localStorage. Solo conocen el consentimiento a través de la cookie HTTP que llega con la petición.
• Client Components (marcados con 'use client'): se ejecutan en el navegador y pueden reaccionar a los eventos de consentimiento.
• Middleware y Route Handlers: pueden leer la cookie de consentimiento para adaptar el renderizado o los procesos del lado del servidor.

La navegación del lado del cliente

Una app Next.js navega con history.pushState, sin recargar la página. En un sitio clásico, cada carga vuelve a ejecutar el banner y bloquea de nuevo los scripts de seguimiento. En una aplicación de una sola página, los scripts que se inyectan después de la primera página no se vuelven a comprobar si su herramienta de consentimiento no se engancha a la navegación del lado del cliente.

El problema de la carga de scripts

El componente next/script ofrece varias estrategias de carga. Con strategy="afterInteractive", el script se carga en cuanto la página es interactiva, antes de cualquier clic en el banner. Sin un mecanismo de consentimiento delante, GA4 o GTM se disparan incluso antes de que aparezca el banner. Es la infracción más habitual en aplicaciones Next.js.

Dos formas de gestionar el consentimiento

Opción 1: usar una CMP (recomendado)

Una plataforma de gestión del consentimiento como FlowConsent se encarga de mostrar el banner, recoger el consentimiento, bloquear de antemano los scripts de terceros, enviar las señales de Google Consent Mode v2 y guardar la prueba del consentimiento. Las traducciones y los cambios normativos se mantienen por usted.

Opción 2: desarrollarlo usted mismo

Un banner propio es viable con un componente React y un Context o store global, pero la lista de cosas que hay que hacer bien es larga:

• bloquear cada script no esencial, incluidos los que inyectan GTM o los contenidos de terceros
• enviar los valores por defecto de Consent Mode v2 antes de cualquier etiqueta de Google
• volver a comprobar el consentimiento en cada navegación del lado del cliente
• guardar la prueba del consentimiento (fecha y hora, versión del banner, elección por categoría) en el servidor
• renovar el consentimiento y gestionar su retirada
• seguir usted mismo cada novedad normativa de la AEPD y del CEPD

Instalar FlowConsent en Next.js paso a paso

El banner de FlowConsent es un script autónomo: no hay que instalar ningún paquete npm para el navegador. El snippet exacto de su proyecto, con su URL de despliegue y su código de licencia, se genera en Builder → Deployment → Integration, que incluye una pestaña Next.js. El procedimiento completo está en la guía de integración de Next.js y React SPA. Si su app React no usa Next.js (Vite, Create React App, React Router), siga la guía de instalación en React.

Paso 1: añadir el script

• App Router: en app/layout.tsx, añada el script de FlowConsent con <Script strategy="beforeInteractive">. Con esta estrategia, Next.js lo carga antes de la hidratación, de modo que el bloqueo previo está activo antes de que se dispare cualquier rastreador.
• Pages Router: en pages/_document.tsx, coloque el <script> de FlowConsent el primero dentro de <Head>.

El snippet de integración incluye además un stub en línea de Google Consent Mode que registra denied por defecto: manténgalo antes del loader. No cargue nunca FlowConsent desde un componente React o un useEffect: cuando ese código se ejecuta, otros scripts ya se han disparado.

Paso 2: activar el modo SPA

En el Builder, abra la pestaña Settings, active SPA Mode y vuelva a desplegar el banner. FlowConsent intercepta entonces history.pushState y history.replaceState, escucha popstate y vuelve a bloquear los scripts de seguimiento no cubiertos en cada navegación. También emite un evento flowconsent:navigation que puede escuchar.

Paso 3: deje que FlowConsent gestione los scripts de seguimiento

No cargue Google Analytics, el Meta Pixel ni herramientas similares con next/script. Declárelos en Builder → Services y el banner solo los inyectará cuando se acepte la categoría correspondiente (analítica, marketing, preferencias). Para contenidos incrustados como los iframes de YouTube, un atributo data-service permite al banner condicionarlos.

Lo mismo ocurre con @next/third-parties (Next.js 14 y posteriores): su componente GoogleAnalytics carga GA4 mediante next/script, fuera del control de su herramienta de consentimiento. Si quiere que FlowConsent gestione GA4, configure el servicio en el Builder en lugar de usar ese paquete.

Google Consent Mode v2 en Next.js

Google Consent Mode v2 es necesario desde marzo de 2024 para los anunciantes que quieren seguir usando las funciones de audiencias y medición de Google Ads con usuarios del Espacio Económico Europeo. Envía cuatro señales a Google: analytics_storage, ad_storage, ad_user_data y ad_personalization.

FlowConsent lo implementa de serie, como explica la guía de Google Consent Mode:

• un stub en línea registra denied por defecto para las cuatro señales antes de que cargue cualquier etiqueta de Google
• wait_for_update: 500 da tiempo al banner para aplicar la elección guardada de un visitante que vuelve
• en cuanto el visitante elige, el banner envía gtag('consent', 'update', …)
• tras un rechazo, las etiquetas de Google solo envían pings sin cookies (gcs=G100), que respetan el rechazo

Use GTM o gtag.js directamente, la regla es la misma: los valores de consentimiento por defecto deben estar en su sitio antes de que se inicialice cualquier etiqueta de Google. Para el método completo, consulte nuestra guía de implementación de Google Consent Mode v2.

Leer el consentimiento en el servidor

Parte del tratamiento empieza en el servidor: eventos de GA4 Measurement Protocol, sincronización con el CRM, lógica de atribución en un Route Handler, renderizado personalizado en un Server Component. El banner no puede bloquear estos procesos, así que su código debe comprobar el consentimiento.

El paquete @flowconsent/server-sdk lee la cookie propia que instala el banner y devuelve una decisión tipada. No tiene dependencias y funciona en el edge (Vercel, Cloudflare Workers) y en Node 18 o posterior, así que sirve en Middleware, Route Handlers y Server Components. La decisión es denegada por defecto cuando la cookie falta, no se puede leer o ha caducado, y decision.can('analytics') o decision.can('google-analytics') le dice si una categoría o un servicio está permitido.

Reaccionar al consentimiento en su código React

Para la lógica que vive en Client Components, FlowConsent emite un evento flowconsent:consent cuyo objeto detail.preferences contiene la elección del visitante por categoría. Un pequeño hook suscrito a ese evento le permite:

• inicializar su propia analítica solo cuando preferences.analytics sea true
• cargar con next/dynamic los componentes que dependen de un rastreador únicamente tras el consentimiento
• actualizar la interfaz cuando un visitante cambia de opinión

Internacionalización

Next.js gestiona de forma nativa el enrutado i18n, y su banner debe hablar el mismo idioma que la página. En FlowConsent, los textos se traducen en la pestaña Translations y el método de detección se configura en Information. El número de idiomas por banner depende del plan: 2 en Free, 5 en Pro y a medida en Enterprise.

Rendimiento y Core Web Vitals

La gestión del consentimiento no debería empeorar sus Core Web Vitals:

• reserve strategy="beforeInteractive" solo para el script de consentimiento, nunca para los rastreadores bloqueados
• los scripts de terceros bloqueados no consumen ancho de banda antes del consentimiento, lo que aligera la primera carga
• compare la puntuación de Lighthouse antes y después de instalar el banner

Errores frecuentes

Cargar GA4 o GTM sin comprobar el consentimiento. Un next/script con afterInteractive se ejecuta antes de cualquier clic en el banner. Deje que la CMP inyecte los rastreadores.

Cargar la CMP demasiado tarde. Si inyecta el banner desde un componente o un useEffect, los rastreadores que ya estaban en la página se habrán disparado antes de que arranque.

Olvidar la navegación del lado del cliente. Sin el modo SPA, los scripts que se añaden después de la primera página no se vuelven a bloquear en las rutas siguientes.

No bloquear el Meta Pixel. Instala cookies publicitarias y debe depender de la categoría de marketing. Nuestra guía del Meta Pixel y el RGPD lo explica en detalle.

Casillas premarcadas o consentimiento pasivo. Un banner con la categoría Analítica premarcada invalida el consentimiento. Todas las categorías no esenciales deben empezar desmarcadas.

Confundir el estado guardado con la prueba. Un valor en una cookie o en localStorage recuerda la elección en un navegador, pero no es una prueba. La prueba es un registro en el servidor con fecha y hora, versión del banner y elección por categoría (consulta qué guardar como prueba del consentimiento).

No volver a preguntar nunca. El consentimiento debe renovarse periódicamente y los rastreadores no deberían durar más de 13 meses.

No ofrecer forma de retirar el consentimiento. El visitante debe poder reabrir sus preferencias en cualquier momento, con un enlace en el pie de página o un botón flotante.

Probar su implementación

1. Abra el sitio en producción en una ventana privada: el banner aparece en la primera página.
2. En las pestañas Network y Application de las DevTools, compruebe que no sale ninguna petición de seguimiento ni se instala ninguna cookie no esencial antes de pulsar Aceptar, también tras varios cambios de ruta.
3. Con Google Tag Assistant, confirme que Consent Mode arranca en denied y solo pasa a granted tras la aceptación.
4. Ejecute el asistente de instalación: compruebe en su página en producción que el stub y el loader están presentes y en el orden correcto.
5. Termine con un escaneo con rechazo desde la pestaña Compliance: carga sus páginas en un navegador real, rechaza el consentimiento y enumera todo lo que se sigue disparando (verificación de cumplimiento).

Checklist de cumplimiento de cookies para Next.js

• Auditar todos los scripts de terceros (next/script, GTM, importaciones directas, @next/third-parties). Nuestra guía de auditoría de cookies detalla el método.
• Clasificar cada cookie: estrictamente necesaria, preferencias, analítica, marketing.
• Añadir el script de consentimiento en app/layout.tsx con beforeInteractive, o el primero en <Head> de pages/_document.tsx.
• Activar el modo SPA y volver a desplegar el banner.
• Declarar los rastreadores en la CMP en lugar de cargarlos con next/script.
• Comprobar que los valores por defecto de Consent Mode v2 están en denied antes de cualquier etiqueta de Google.
• Condicionar los tratamientos del servidor a una decisión de consentimiento leída en la petición.
• Ofrecer un botón Rechazar tan visible como Aceptar, sin casillas premarcadas.
• Guardar la prueba del consentimiento y renovarlo periódicamente.
• Incluir un enlace a las preferencias en todas las páginas.
• Verificar en una ventana privada y después con un escaneo con rechazo.

Conclusión

El cumplimiento del RGPD en una aplicación Next.js se resume en un principio: ningún script no esencial se ejecuta antes del consentimiento del visitante, ni en la primera página ni en cada navegación del lado del cliente. Next.js hace muy fácil añadir rastreadores, así que esta regla necesita un mecanismo fiable: un script de consentimiento cargado antes de la hidratación, el modo SPA, rastreadores gestionados por la CMP y el consentimiento comprobado también en el servidor.

Empiece por escanear su sitio Next.js con FlowConsent para ver qué rastreadores se cargan hoy sin consentimiento.