> Cómo hacer su app Next.js conforme al RGPD: bloquear rastreadores antes del consentimiento, App Router, navegación SPA, Consent Mode v2 y servidor.
>
> Canonical: https://www.flowconsent.com/es/blog/nextjs-cookies-rgpd-guia-conformidad

[Guías por plataforma](https://www.flowconsent.com/es/blog?category=platforms)

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

Publicado el 13 de julio de 2026 · Actualizado el 2 de octubre de 2026 · 10 min de lectura

En resumen

Cómo obtener un consentimiento de cookies válido en una app Next.js, desde la instalación con el App Router y la navegación SPA hasta Google Consent Mode v2 y la comprobación en el servidor.

## 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](https://www.flowconsent.com/es/blog/duracion-cookies-rgpd-regla-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](https://www.flowconsent.com/es/doc/nextjs-integration). Si su app React no usa Next.js (Vite, Create React App, React Router), siga la [guía de instalación en React](https://www.flowconsent.com/es/doc/install-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](https://www.flowconsent.com/es/doc/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](https://www.flowconsent.com/es/blog/google-consent-mode-v2-guia-implementacion).

## 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](https://www.flowconsent.com/es/blog/meta-pixel-cookies-rgpd-cumplimiento) 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](https://www.flowconsent.com/es/blog/prueba-consentimiento-cookies-que-guardar)).

**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](https://www.flowconsent.com/es/doc/setup-wizard): 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](https://www.flowconsent.com/es/doc/compliance-verification)).

## 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](https://www.flowconsent.com/es/blog/auditoria-cookies-sitio-web-guia-completa) 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](https://www.flowconsent.com/es/scan) para ver qué rastreadores se cargan hoy sin consentimiento.

[Volver al blog](https://www.flowconsent.com/es/blog)

Compartir el artículo · [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.flowconsent.com%2Fes%2Fblog%2Fnextjs-cookies-rgpd-guia-conformidad) · [X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.flowconsent.com%2Fes%2Fblog%2Fnextjs-cookies-rgpd-guia-conformidad)

Preguntas

## Preguntas frecuentes sobre este tema.

¿No encuentra su pregunta? Escríbanos, respondemos rápido.

[Escríbanos](https://www.flowconsent.com/es/demo)

### ¿Necesita un banner de cookies un sitio Next.js aunque solo use Google Analytics?

Sí. Google Analytics 4 instala cookies de medición de audiencia que no son estrictamente necesarias para el funcionamiento del sitio. Según el RGPD y las directrices de la AEPD, su instalación requiere el consentimiento previo del usuario. El uso de Next.js como framework no cambia esta obligación.

### ¿Cómo se bloquea Google Tag Manager en Next.js antes de obtener el consentimiento?

El enfoque más fiable es cargar GTM de forma condicional basándose en un estado de consentimiento global (React Context o store). El componente Script de Next.js con strategy='afterInteractive' debe renderizarse condicionalmente: el componente solo se monta una vez que el usuario ha dado su consentimiento para las categorías pertinentes. Una CMP dedicada gestiona esta lógica automáticamente.

### ¿Se puede usar Plausible o Matomo en Next.js sin banner de cookies?

Es posible en determinadas condiciones. Plausible Analytics no instala cookies por defecto y puede estar exento de consentimiento si se configura sin identificación de usuarios. Matomo puede estar exento si se activa la anonimización de IP y los datos no se comparten con terceros, conforme a las condiciones de exención de la AEPD. Verifique siempre la configuración exacta de la herramienta antes de reclamar una exención.

### ¿Cuál es la duración máxima de una cookie de consentimiento en una app Next.js?

Las autoridades de protección de datos recomiendan generalmente que la cookie que almacena las preferencias del usuario no supere los 13 meses. Pasado ese plazo, el consentimiento se considera caducado y debe recogerse de nuevo. La aplicación debe activar una solicitud de renovación del consentimiento como máximo entre 6 y 13 meses después del último evento de consentimiento.

Siga leyendo

## Para saber más.

[Todos los artículos](https://www.flowconsent.com/es/blog)

[Guías por plataforma · 19 de junio de 2026](https://www.flowconsent.com/es/blog/woocommerce-rgpd-guia-conformidad)

### [WooCommerce y RGPD: guía completa de cumplimiento](https://www.flowconsent.com/es/blog/woocommerce-rgpd-guia-conformidad)

[WooCommerce instala cookies funcionales y scripts de seguimiento de terceros sujetos al RGPD. Esta guía explica cuáles requieren consentimiento y cómo hacer su tienda conforme.](https://www.flowconsent.com/es/blog/woocommerce-rgpd-guia-conformidad)

[Leer el artículo ](https://www.flowconsent.com/es/blog/woocommerce-rgpd-guia-conformidad)·

[Herramientas de marketing · 9 de mayo de 2026](https://www.flowconsent.com/es/blog/hotjar-cookies-rgpd-cumplimiento)

### [Hotjar y RGPD: cookies, grabaciones de sesiones y conformidad](https://www.flowconsent.com/es/blog/hotjar-cookies-rgpd-cumplimiento)

[Hotjar es una herramienta de análisis de comportamiento que instala cookies de seguimiento. Esta guía explica por qué el consentimiento es obligatorio y cómo configurar Hotjar conforme al RGPD.](https://www.flowconsent.com/es/blog/hotjar-cookies-rgpd-cumplimiento)

[Leer el artículo ](https://www.flowconsent.com/es/blog/hotjar-cookies-rgpd-cumplimiento)·

[Guías por plataforma · 31 de mayo de 2026](https://www.flowconsent.com/es/blog/shopify-cookies-rgpd-guia-conformidad)

### [Shopify y cookies RGPD: guía de conformidad](https://www.flowconsent.com/es/blog/shopify-cookies-rgpd-guia-conformidad)

[El banner nativo de Shopify solo cubre una parte. Descubra qué cookies instala su tienda, cómo auditarlas y cómo bloquear píxeles y aplicaciones antes del consentimiento.](https://www.flowconsent.com/es/blog/shopify-cookies-rgpd-guia-conformidad)

[Leer el artículo](https://www.flowconsent.com/es/blog/shopify-cookies-rgpd-guia-conformidad)

## Haga que su sitio cumpla la normativa hoy mismo.

Gratis hasta 25.000 sesiones al mes. Sin tarjeta de crédito, sin compromiso.

[Crear mi banner](https://app.flowconsent.com/auth/sign-up?utm_source=flowconsent.com\&utm_medium=referral\&utm_campaign=general) · [Escanear mi sitio](https://www.flowconsent.com/es/scan)