Cookie consent banner displays on first visit before non-essential cookies are set

ePrivacy Art. 5(3) prohibits storing information on a user's device without prior informed consent. When analytics and ad pixels fire on page load before a consent banner appears, every first visit becomes an unlawful data collection event. Regulators — the CNIL, ICO, and Austrian DSB — have each issued fines specifically for this ordering failure, not for lacking a banner entirely. The business risk is not theoretical: a single DPA complaint can trigger an investigation across an entire platform.

Render the consent component at the top of the root layout and move all non-essential scripts into its post-consent callback. In Next.js App Router, no <Script> tag for GA4, Facebook Pixel, or Hotjar should appear in app/layout.tsx unless it is inside a consent gate or using GA4 Consent Mode v2 with analytics_storage: 'denied' as the default.

// app/layout.tsx — correct ordering
import { CookieConsent } from '@/components/CookieConsent'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>{/* no third-party scripts here */}</head>
      <body>
        <CookieConsent /> {/* shows banner first; loads approved scripts after */}
        {children}
      </body>
    </html>
  )
}

The CookieConsent component reads localStorage.getItem('cookie_consent') in a useEffect; if nothing is stored, it shows the banner. Non-essential scripts are injected into the DOM only inside the loadApprovedScripts() callback that fires after the user saves a preference.