How do I add a cookie consent banner to a React or Next.js app?

Add the consent script as early as possible in the document head, gate every non-essential script behind the visitor's consent state, and expose the choice to your components. In Next.js, load the banner before interactive hydration and use the consent state to conditionally render analytics and pixel components.

Load order is everything

The banner must run before any tracker. In practice that means the consent script loads in the head with high priority, sets a default denied state, and only after that may analytics or pixel code initialize. A banner that hydrates after your tags have already fired has failed its only job.

Gating scripts in React

Wrap third-party integrations in components that read the consent state from context and render nothing until consent exists for their category. For server-rendered Next.js apps, check the stored consent before emitting script tags so denied visitors never receive the tracker code at all.

Passing consent to Google

If you use Google tags, wire the consent state into Consent Mode v2 signals so analytics_storage and ad_storage reflect the visitor's choice. This keeps measurement behavior lawful in the EU and UK and enables conversion modeling for denied visitors.