Installing on Next.js

Using the Script Component (Recommended)

In your root layout (app/layout.tsx or pages/_app.tsx): ``

tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    
      
      
        {children}
        
    
  )
}



Using the Head Component (Pages Router)

If you use the Pages Router:

tsx
// pages/_app.tsx
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>



Consent-Aware Analytics

To conditionally load analytics based on consent:

tsx



LegalBanner automatically integrates with Google Consent Mode v2, so GA4 will respect consent signals without additional code.

Tag Governance with Next.js

If you use Tag Governance Loader mode, wrap scripts as inert stubs:

html



Important Notes

Use

strategy="afterInteractive" for the LegalBanner script (not beforeInteractive` - the script handles its own loading priority)

The script works with both App Router and Pages Router

SSR/SSG pages are fully supported - the script runs client-side only