> Rendre une app Next.js conforme au RGPD : blocage des traceurs avant consentement, App Router, navigation SPA, Consent Mode v2 et contrôle serveur. > > Canonical: https://www.flowconsent.com/fr/blog/nextjs-cookies-rgpd-guide-conformite [Guides par plateforme](https://www.flowconsent.com/fr/blog?category=platforms) # Next.js et cookies RGPD : le guide complet de conformité Publié le 13 juillet 2026 · Mis à jour le 2 octobre 2026 · 10 min de lecture En bref Comment recueillir un consentement cookies valable dans une app Next.js, de l'installation avec l'App Router à la navigation SPA, en passant par Google Consent Mode v2 et le contrôle côté serveur. ## L'essentiel Un site Next.js qui charge Google Analytics, le Meta Pixel ou tout autre traceur doit recueillir le consentement des visiteurs avant que ces scripts s'exécutent, comme l'exigent le RGPD et l'article 82 de la loi Informatique et Libertés. Afficher une bannière ne suffit pas : les scripts non essentiels doivent rester bloqués jusqu'à l'accord explicite, les signaux Google Consent Mode v2 doivent partir à l'état `denied`, le choix doit être respecté à chaque navigation côté client et vous devez conserver une preuve de chaque consentement. Ce guide couvre les exigences du RGPD, les spécificités de Next.js (App Router, Server Components, navigation SPA, SSR) et une mise en œuvre pas à pas. ## Pourquoi la conformité cookies est critique pour une app Next.js Next.js est un framework React très utilisé pour les sites marketing, les boutiques e-commerce, les SaaS et les sites éditoriaux, souvent déployés sur Vercel ou Netlify. Sa souplesse est aussi son principal risque de conformité : les développeurs y ajoutent couramment Google Analytics 4, Google Tag Manager, le Meta Pixel, Hotjar, Intercom et d'autres outils, qui déposent tous des cookies ou des traceurs équivalents soumis au consentement préalable. L'erreur la plus fréquente consiste à charger ces scripts dans `_app.tsx`, `app/layout.tsx` ou un composant Layout partagé, sans aucune vérification du consentement. Ce schéma est extrêmement répandu et constitue une violation nette du RGPD : les traceurs se déclenchent dès la première page, avant que le visiteur ait pu choisir quoi que ce soit. Les conséquences sont réelles. La CNIL a infligé des amendes de plusieurs dizaines de millions d'euros à de grands sites pour des manquements liés aux cookies, les plaintes d'associations comme noyb se multiplient, et une bannière qui ne fait pas ce qu'elle annonce abîme la confiance des utilisateurs. ## Ce que le RGPD exige pour les cookies dans Next.js Le RGPD, combiné à la directive ePrivacy, impose trois obligations pour les cookies non essentiels : informer clairement l'utilisateur, recueillir son consentement avant d'activer les traceurs, et lui permettre de retirer ce consentement aussi facilement qu'il l'a donné. ### Quels cookies nécessitent un consentement ? La plupart des outils tiers intégrés dans une app Next.js sont concernés : - Mesure d'audience : Google Analytics 4, ainsi que Matomo ou Plausible lorsqu'ils ne sont pas configurés pour bénéficier de l'exemption CNIL - Publicité et marketing : Meta Pixel, LinkedIn Insight Tag, Google Ads, TikTok Pixel - Expérience utilisateur : Hotjar, FullStory, LogRocket, Microsoft Clarity - Support et chat : Intercom, Drift, HubSpot Chat Les cookies strictement nécessaires au fonctionnement de l'application (session, authentification, panier) en sont exemptés. Attention : `localStorage` et `sessionStorage` relèvent du même régime que les cookies. Un traceur qui écrit dans le stockage local exige lui aussi un consentement. ### Les trois obligations fondamentales - **Informer** : indiquer quels cookies sont utilisés, pourquoi et par qui, avant tout dépôt. - **Recueillir un consentement valable** : libre, spécifique, éclairé et univoque. Pas de case pré-cochée, pas de consentement implicite par défilement, et un bouton Refuser aussi simple à utiliser que le bouton Accepter. - **Respecter le choix** : ne pas charger les scripts refusés, permettre le retrait à tout moment et redemander après un délai raisonnable. La CNIL recommande de conserver le choix (acceptation comme refus) pendant 6 mois, et la durée de vie des traceurs ne doit pas dépasser 13 mois (voir notre article sur [la règle des 13 mois](https://www.flowconsent.com/fr/blog/duree-conservation-cookies-cnil-13-mois)). ## Les spécificités de Next.js ### Server Components et Client Components Avec l'App Router (Next.js 13 et suivants), la frontière entre Server et Client Components compte pour le consentement : - **Server Components** : exécutés sur le serveur, ils n'ont accès ni à `document.cookie` ni à `localStorage`. Ils ne connaissent le consentement qu'à travers le cookie HTTP envoyé avec la requête. - **Client Components** (marqués `'use client'`) : exécutés dans le navigateur, ils peuvent réagir aux événements de consentement. - **Middleware et Route Handlers** : ils peuvent lire le cookie de consentement pour adapter le rendu ou les traitements côté serveur. ### La navigation côté client Une app Next.js navigue avec `history.pushState`, sans recharger la page. Sur un site classique, chaque chargement relance la bannière et rebloque les scripts de suivi. Dans une application monopage, les scripts injectés après la première page ne sont pas revérifiés si votre outil de consentement ne s'accroche pas à la navigation côté client. ### Le problème du chargement des scripts Le composant `next/script` propose plusieurs stratégies de chargement. Avec `strategy="afterInteractive"`, le script se charge dès que la page devient interactive, avant tout clic sur la bannière. Sans mécanisme de consentement en amont, GA4 ou GTM se déclenche avant même l'affichage de la bannière. C'est la violation la plus courante dans les applications Next.js. ## Deux façons de gérer le consentement ### Option 1 : utiliser une CMP (recommandé) Une plateforme de gestion du consentement comme FlowConsent prend en charge l'affichage de la bannière, la collecte du consentement, le blocage préalable des scripts tiers, les signaux Google Consent Mode v2 et la preuve du consentement. Les traductions et les évolutions réglementaires sont maintenues pour vous. ### Option 2 : tout développer vous-même Une bannière maison est faisable avec un composant React et un Context ou un store global, mais la liste des points à réussir est longue : - bloquer chaque script non essentiel, y compris ceux injectés par GTM ou par des intégrations tierces - envoyer les valeurs par défaut du Consent Mode v2 avant tout tag Google - revérifier le consentement à chaque navigation côté client - conserver la preuve du consentement (horodatage, version de la bannière, choix par catégorie) côté serveur - renouveler le consentement et gérer son retrait - suivre vous-même chaque évolution réglementaire (CNIL, CEPD) ## Installer FlowConsent dans Next.js, étape par étape La bannière FlowConsent est un script autonome : aucun paquet npm à installer côté navigateur. Le snippet exact de votre projet, avec votre URL de déploiement et votre code de licence, est généré dans **Builder → Deployment → Integration**, qui propose un onglet **Next.js**. La procédure complète figure dans le [guide d'intégration Next.js et React SPA](https://www.flowconsent.com/fr/doc/nextjs-integration). Pour une app React sans Next.js (Vite, Create React App, React Router), suivez plutôt le [guide d'installation React](https://www.flowconsent.com/fr/doc/install-react). ### Étape 1 : ajouter le script - **App Router** : dans `app/layout.tsx`, ajoutez le script FlowConsent avec `