Next.js y cookies RGPD: guía de conformidad

TL;DR

Un sitio Next.js que integra Google Analytics, el Meta Pixel u otras herramientas de seguimiento debe recopilar el consentimiento de los visitantes antes de activar esos scripts, tal como exige el RGPD. Mostrar un banner no es suficiente: hay que bloquear los scripts de terceros hasta que el usuario dé su acuerdo explícito, almacenar la prueba de ese consentimiento e implementar las señales de Google Consent Mode v2. Esta guía explica cómo hacerlo correctamente en una aplicación Next.js.

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

Next.js es un framework de React muy utilizado para sitios web y aplicaciones modernas, generalmente desplegados en plataformas como Vercel o Netlify. Su flexibilidad lo hace popular para tiendas de comercio electrónico, productos SaaS y plataformas editoriales.

Esa misma flexibilidad lleva a que los desarrolladores integren decenas de scripts de terceros: Google Analytics 4, Google Tag Manager, Meta Pixel, Hotjar, Intercom, etc. Cada una de estas herramientas instala cookies que requieren el consentimiento previo del usuario según el RGPD y la LOPDGDD.

El riesgo más habitual: cargar estos scripts dentro de _app.tsx o un componente Layout sin ninguna verificación de consentimiento. Este patrón es muy frecuente y constituye una infracción clara del RGPD.

Qué exige el RGPD para las cookies en una app Next.js

El RGPD (junto con la Directiva ePrivacy) impone tres obligaciones fundamentales para las cookies no esenciales: informar claramente al usuario, recopilar su consentimiento antes de activar los rastreadores y permitirle retirar ese consentimiento con la misma facilidad con la que lo otorgó.

¿Qué cookies requieren consentimiento en Next.js?

• Analítica: Google Analytics 4, Plausible (modo estándar), Matomo (modo estándar)
• 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 3 obligaciones fundamentales

1. Informar: describir claramente qué cookies se utilizan, para qué y por quién, antes de instalarlas.
2. Recopilar el consentimiento: obtener un consentimiento libre, específico, informado e inequívoco. Sin casillas premarcadas ni consentimiento implícito por desplazamiento.
3. Respetar la elección: no cargar los scripts rechazados, permitir el retiro en cualquier momento y renovar el consentimiento periódicamente según las directrices de la AEPD.

Cómo implementar un banner de cookies conforme al RGPD en Next.js

Opción 1: usar una CMP (enfoque recomendado)

Una CMP como FlowConsent gestiona automáticamente la visualización del banner, la recopilación del consentimiento, el bloqueo de scripts de terceros y el envío de las señales de Consent Mode v2. La integración en Next.js se realiza mediante un script inyectado en el componente Head o a través del componente Script de Next.js con la estrategia beforeInteractive.

Opción 2: desarrollarlo uno mismo

Desarrollar un banner de consentimiento propio en Next.js es técnicamente posible, pero implica implementar manualmente el bloqueo de scripts, las señales de Consent Mode v2, el almacenamiento del consentimiento y la lógica de renovación, y actualizar todo eso ante cada cambio normativo.

Bloquear scripts hasta obtener el consentimiento

El patrón fundamental en Next.js consiste en condicionar la carga de los scripts de terceros al estado del consentimiento. El componente Script de Next.js con la estrategia afterInteractive se carga en cuanto la página es interactiva, antes de que aparezca el banner. Esa carga debe condicionarse al estado del consentimiento.

Google Consent Mode v2 y Next.js

Google Consent Mode v2 es obligatorio desde marzo de 2024 para los anunciantes que utilizan Google Ads o GA4 con remarketing. Permite enviar señales de estado de consentimiento a Google (analytics_storage, ad_storage, ad_user_data, ad_personalization) incluso cuando el usuario rechaza las cookies.

Nuestra guía completa de Google Consent Mode v2 cubre la implementación técnica paso a paso, incluidas las configuraciones de GTM para aplicaciones JavaScript modernas.

Errores frecuentes en el cumplimiento de cookies en Next.js

Lista de verificación de conformidad de cookies para Next.js

1. Auditar todos los scripts de terceros cargados en la aplicación (componente Script de Next.js, GTM, importaciones directas).
2. Categorizar cada cookie: estrictamente necesaria, funcional, analítica, de marketing.
3. Integrar una CMP o componente de consentimiento que bloquee por defecto los scripts no esenciales.
4. Verificar que los scripts de terceros (GA4, GTM, Meta Pixel) solo se cargan tras el consentimiento explícito.
5. Implementar las señales de Google Consent Mode v2 (analytics_storage, ad_storage, ad_user_data, ad_personalization).
6. Almacenar el consentimiento de forma segura con marca de tiempo, versión del banner y elección por categoría.
7. Configurar la renovación automática del consentimiento.
8. Incluir un enlace de modificación de preferencias accesible desde todas las páginas.
9. Probar el banner en modo privado y confirmar que no se instalan cookies no esenciales antes del consentimiento.
10. Realizar auditorías periódicas de cookies con una herramienta dedicada.

Para conocer las cookies que instala actualmente su sitio, nuestra guía completa de auditoría de cookies detalla el método completo.

Conclusión

El cumplimiento del RGPD en una aplicación Next.js se resume en un principio sencillo: ningún script no esencial debe ejecutarse antes del consentimiento del usuario. La flexibilidad de Next.js facilita la integración de rastreadores, pero también exige una vigilancia constante sobre qué se carga y cuándo.

La solución más fiable es usar una CMP dedicada que gestione automáticamente el bloqueo de scripts, las señales de Consent Mode v2 y la prueba de consentimiento. Empiece escaneando su sitio Next.js en FlowConsent para identificar exactamente qué rastreadores requieren acción.