Preguntas frecuentes
¿Cómo bloquear Google Analytics antes del consentimiento en Next.js?
En Next.js, usa el componente Script con strategy="afterInteractive" para GA4 y condiciona su renderizado al estado de consentimiento. Con FlowConsent, añade el atributo data-category="analytics" a tu script de GA4 — la CMP intercepta automáticamente su carga hasta que el usuario acepta. Alternativamente, usa un estado React que se actualice tras el evento fc:consent-update y renderiza condicionalmente el componente GoogleAnalytics de @next/third-parties.
¿Qué estrategia Next.js Script usar para una CMP como FlowConsent?
Usa strategy="beforeInteractive" para el propio script de FlowConsent — esto garantiza que la CMP se cargue primero, antes de que el navegador ejecute otros scripts. Para los scripts de terceros bloqueados por la CMP (analytics, publicidad), usa strategy="afterInteractive" o "lazyOnload". Nunca pongas la CMP en "afterInteractive" ya que crearía una ventana de tiempo donde los scripts de terceros podrían ejecutarse sin consentimiento.
¿Funciona Google Consent Mode v2 con los Server Components de Next.js?
Consent Mode v2 es una tecnología del lado del cliente (envía señales a través de gtag en el navegador) y no se aplica directamente a los Server Components. Sin embargo, para el procesamiento del lado del servidor (API Routes, Server Actions), puedes leer el estado de consentimiento desde la cookie HTTP establecida por FlowConsent (fc_consent) a través de la función cookies() de next/headers. Esto permite condicionar el procesamiento de datos del servidor al consentimiento del usuario.
¿Cómo probar el cumplimiento RGPD de una aplicación Next.js?
Para probar tu cumplimiento RGPD en Next.js: 1) Abre tu sitio en navegación privada y verifica que no se colocan cookies no esenciales antes del consentimiento (pestaña Aplicación de DevTools). 2) Usa Google Tag Assistant para verificar las señales de Consent Mode v2. 3) Prueba con el Comprobador de cookies de la CNIL. 4) Verifica que el banner se muestra correctamente en móvil y escritorio. 5) Prueba el rechazo total y verifica que no se carga ningún script de analytics. 6) Usa Lighthouse para el impacto en Core Web Vitals.
¿FlowConsent funciona con el App Router de Next.js?
Sí. FlowConsent es compatible con el App Router de Next.js (Next.js 13+). Intégralo en tu app/layout.tsx mediante el componente <Script> de next/script con strategy="beforeInteractive". FlowConsent funciona como un Client Component nativo: interactúa con el DOM del navegador y no requiere lógica específica del lado del servidor. El evento fc:consent-update puede escucharse en tus Client Components para reaccionar a las elecciones del usuario en tiempo real.