# Intégration Next.js et SPA React

Installez la bannière FlowConsent dans une app Next.js (App Router ou Pages Router) et activez le mode SPA pour revérifier le consentement à chaque navigation côté client.

> Canonical: https://www.flowconsent.com/fr/doc/nextjs-integration
> Last updated: 2026-05-31
La bannière FlowConsent est un unique `<script>` autonome — le même snippet fonctionne sur Next.js, Nuxt, SvelteKit et toute app en custom code, exactement comme sur Webflow, Framer ou WordPress. Il y a **une étape supplémentaire** pour les apps single-page : activer le **mode SPA** afin que le consentement soit revérifié lors des navigations côté client.

## Pourquoi une SPA demande une étape de plus

Sur un site multipage classique, chaque navigation recharge entièrement la page : la bannière se réexécute et rebloque les scripts de tracking à chaque page. Une Single Page Application (Next.js, React, Vue…) navigue avec `history.pushState` — **sans rechargement** — donc sans le mode SPA, les scripts injectés après la première page ne seraient pas rebloqués sur les routes suivantes.

Le mode SPA hooke `pushState`, `replaceState` et `popstate` pour revérifier le consentement à chaque navigation côté client.

## Étape 1 — Ajouter le script

La bannière embarque déjà les valeurs par défaut de Google Consent Mode v2 dans le bundle ; le snippet reste donc minimal : il suffit de charger le script le plus tôt possible.

### 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://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  )
}
```

`strategy="beforeInteractive"` charge le script avant l'hydratation, afin que le blocage préalable soit en place avant tout déclenchement de tracking.

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

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

export default function Document() {
  return (
    <Html>
      <Head>
        {/* FlowConsent CMP — à placer en premier dans <Head> */}
        <script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

Vous trouverez votre snippet exact (avec votre URL de déploiement et votre code de licence) dans **Builder → Déploiement → Intégration**, où un onglet **Next.js** génère ce code pour vous.

## Étape 2 — Activer le mode SPA

Dans le Builder, ouvrez l'onglet **Réglages** et activez le **mode SPA**. Redéployez votre bannière pour appliquer le changement.

Avec le mode SPA activé, FlowConsent va :

- Intercepter `history.pushState` et `history.replaceState`
- Écouter les événements `popstate`
- Rebloquer les scripts de tracking non couverts à chaque navigation
- Émettre un événement `flowconsent:navigation` auquel vous pouvez vous abonner

## Étape 3 — Laisser FlowConsent gérer les scripts de tracking

Ne chargez **pas** les scripts de tracking (Google Analytics, Meta Pixel…) avec `next/script`. Déclarez-les plutôt dans **Builder → Services** et laissez FlowConsent les injecter une fois le consentement donné.

```tsx
// À éviter — script de tracking hors du contrôle de FlowConsent
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />

// À privilégier — configurez Google Analytics dans Builder → Services
```

## Optionnel — Réagir au consentement dans votre app

FlowConsent émet des événements auxquels vous pouvez vous abonner :

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

export function useConsentListener() {
  useEffect(() => {
    const onConsent = (event) => {
      const { preferences } = event.detail
      if (preferences?.analytics) {
        // consentement analytics accordé — initialisez votre propre analytics
      }
    }
    window.addEventListener('flowconsent:consent', onConsent)
    return () => window.removeEventListener('flowconsent:consent', onConsent)
  }, [])
}
```

## Liste de vérification

- [ ] Le script est dans `app/layout.tsx` (App Router) ou `pages/_document.tsx` (Pages Router)
- [ ] L'App Router utilise `strategy="beforeInteractive"`
- [ ] Le **mode SPA** est activé dans le Builder et la bannière redéployée
- [ ] Aucun `next/script` pour les scripts de tracking — ils sont configurés dans Services
- [ ] La bannière apparaît au premier chargement
- [ ] Aucune requête de tracking dans l'onglet Réseau avant de cliquer sur **Accepter**
- [ ] Le consentement persiste à travers les navigations côté client
