Intégration Next.js et SPA React

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`)

import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {/* FlowConsent CMP */}
        <Script
          src="https://VOTRE-WORKSPACE.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`)

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-WORKSPACE.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é.

// À é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 :

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