# Intégration Next.js et SPA React

Installer FlowConsent dans Next.js (App Router ou Pages Router) et activer le mode SPA pour revérifier le consentement à chaque navigation.

> Canonical: https://www.flowconsent.com/fr/doc/nextjs-integration
> Last updated: 2026-05-31
La bannière FlowConsent tient en un seul `<script>` autonome : le même extrait de code fonctionne sur Next.js, Nuxt, SvelteKit et toute application codée sur mesure, exactement comme sur Webflow, Framer ou WordPress. Il y a **une étape supplémentaire** pour les applications monopages (SPA) : 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 bloque de nouveau les scripts de suivi à chaque page. Une application monopage (Next.js, React, Vue…) navigue avec `history.pushState`, **sans rechargement** : 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 intercepte `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 son script : l'extrait de code 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 suivi.

### 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 extrait de code 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 l'éditeur (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`
- Bloquer de nouveau les scripts de suivi non autorisés à chaque navigation
- Émettre un événement `flowconsent:navigation` auquel vous pouvez vous abonner

## Étape 3 : laisser FlowConsent gérer les scripts de suivi

Ne chargez **pas** les scripts de suivi (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
```

## Facultatif : réagir au consentement dans votre application

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 l'éditeur et la bannière redéployée
- [ ] Aucun `next/script` pour les scripts de suivi : ils sont configurés dans Services
- [ ] La bannière apparaît au premier chargement
- [ ] Aucune requête de suivi dans l'onglet Réseau avant de cliquer sur **Accepter**
- [ ] Le consentement persiste à travers les navigations côté client

## Le faire depuis votre agent IA (MCP)

FlowConsent dispose d'un serveur MCP officiel, `https://mcp.flowconsent.com`, utilisable depuis Claude, ChatGPT ou tout client MCP. La connexion se fait en OAuth 2.0 avec votre compte FlowConsent, sans clé d'API. Votre agent récupère l'extrait et les instructions de placement (outils `get_banner_snippet` et `get_setup_instructions`), vérifie l'installation par un vrai scan (`verify_consent_compliance`) et peut poser une surveillance récurrente (`monitor_compliance`). Il ne modifie pas votre application Next.js à votre place : le collage reste de votre côté.

Exemple de demande : « Donne-moi l'extrait de code de ma bannière pour mon application Next.js et vérifie qu'il est bien installé sur https://monsite.fr ».

Voir le [guide du serveur MCP](/fr/doc/mcp-server) et la page [FlowConsent MCP](/fr/mcp).