# Integración con Next.js y SPA React

Instala el banner de FlowConsent en una app Next.js (App Router o Pages Router) y activa el Modo SPA para volver a comprobar el consentimiento en cada navegación del lado del cliente.

> Canonical: https://www.flowconsent.com/es/doc/nextjs-integration
> Last updated: 2026-05-31
El banner de FlowConsent es un único `<script>` autónomo: el mismo fragmento funciona en Next.js, Nuxt, SvelteKit y cualquier app de código personalizado, igual que en Webflow, Framer o WordPress. Hay **un paso adicional** para las apps de página única: activar el **Modo SPA** para que el consentimiento se vuelva a comprobar en las navegaciones del lado del cliente.

## Por qué una SPA necesita un paso más

En un sitio multipágina clásico, cada navegación recarga la página por completo, por lo que el banner se vuelve a ejecutar y vuelve a bloquear los scripts de seguimiento en cada página. Una Single Page Application (Next.js, React, Vue…) navega con `history.pushState` — **sin recargar la página** — así que sin el Modo SPA, los scripts inyectados tras la primera página no se volverían a bloquear en las rutas siguientes.

El Modo SPA engancha `pushState`, `replaceState` y `popstate` para volver a verificar el consentimiento en cada navegación del lado del cliente.

## Paso 1 — Añadir el script

El banner ya incluye los valores predeterminados de Google Consent Mode v2 dentro del bundle, por lo que el fragmento se mantiene mínimo: basta con cargar el script lo antes posible.

### App Router (`app/layout.tsx`)

```tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {/* FlowConsent CMP */}
        <Script
          src="https://TU-WORKSPACE.consent.flowconsent.com/cookie-manager.js?code=TU_CODIGO_DE_LICENCIA"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  )
}
```

`strategy="beforeInteractive"` hace que Next.js cargue el script antes de la hidratación, de modo que el bloqueo previo esté activo antes de que se dispare cualquier seguimiento.

### Pages Router (`pages/_document.tsx`)

```tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        {/* FlowConsent CMP — colócalo primero en <Head> */}
        <script src="https://TU-WORKSPACE.consent.flowconsent.com/cookie-manager.js?code=TU_CODIGO_DE_LICENCIA" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

Encontrarás tu fragmento exacto (con tu URL de despliegue y tu código de licencia) en **Builder → Despliegue → Integración**, donde una pestaña **Next.js** genera este código por ti.

## Paso 2 — Activar el Modo SPA

En el Builder, abre la pestaña **Ajustes** y activa el **Modo SPA**. Vuelve a desplegar tu banner para aplicar el cambio.

Con el Modo SPA activado, FlowConsent hará lo siguiente:

- Interceptar `history.pushState` y `history.replaceState`
- Escuchar los eventos `popstate`
- Volver a bloquear los scripts de seguimiento no cubiertos en cada navegación
- Emitir un evento `flowconsent:navigation` al que puedes suscribirte

## Paso 3 — Deja que FlowConsent gestione los scripts de seguimiento

**No** cargues los scripts de seguimiento (Google Analytics, Meta Pixel…) con `next/script`. En su lugar, decláralos en **Builder → Services** y deja que FlowConsent los inyecte una vez otorgado el consentimiento.

```tsx
// Evitar — script de seguimiento fuera del control de FlowConsent
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />

// Preferir — configura Google Analytics en Builder → Services
```

## Opcional — Reaccionar al consentimiento en tu app

FlowConsent emite eventos a los que puedes suscribirte:

```tsx
import { useEffect } from 'react'

export function useConsentListener() {
  useEffect(() => {
    const onConsent = (event) => {
      const { preferences } = event.detail
      if (preferences?.analytics) {
        // consentimiento de analytics otorgado — inicializa tu propio analytics
      }
    }
    window.addEventListener('flowconsent:consent', onConsent)
    return () => window.removeEventListener('flowconsent:consent', onConsent)
  }, [])
}
```

## Lista de verificación

- [ ] El script está en `app/layout.tsx` (App Router) o `pages/_document.tsx` (Pages Router)
- [ ] El App Router usa `strategy="beforeInteractive"`
- [ ] El **Modo SPA** está activado en el Builder y el banner está redesplegado
- [ ] Sin `next/script` para los scripts de seguimiento — están configurados en Services
- [ ] El banner aparece en la primera carga
- [ ] Sin peticiones de seguimiento en la pestaña Red antes de hacer clic en **Aceptar**
- [ ] El consentimiento persiste a través de las navegaciones del lado del cliente
