Analytics does not initialize before consent is granted

A consent banner that exists as a UI component but does not actually block analytics from firing provides zero legal protection. Under GDPR Art. 7, consent must be freely given before processing begins — not after. This is the most common AI-built project failure: analytics loads unconditionally in the root layout, the banner is purely decorative, and every page view constitutes an unlawful processing event under GDPR and eprivacy Art. 5(3). Data regulators consider cosmetic consent banners an aggravating factor in enforcement.

Move analytics initialization out of the root layout and into a client component that reads consent state before executing. In Next.js App Router:

// components/ConsentGatedAnalytics.tsx
'use client'
import { useEffect } from 'react'

export function ConsentGatedAnalytics() {
  useEffect(() => {
    const consent = localStorage.getItem('analytics_consent')
    if (consent === 'true') initAnalytics()
  }, [])
  return null
}

For GA4, implement Consent Mode v2 in app/layout.tsx — set analytics_storage: 'denied' before the gtag script tag, then call gtag('consent', 'update', { analytics_storage: 'granted' }) inside the accept handler. Remove any unconditional <Script src="gtag"> tags from app/layout.tsx.