Skip to content

Next.js integration guide

Cookie consent for your Next.js app.

Install the banner in your shared layout, then connect the visitor's choice to your analytics and other optional tools. Here is the path from script tag to a tested integration.

1. Add the widget to your root layout

Create a service in Polimeo and copy its service ID from Integration. In an App Router project, place next/script in app/layout.tsx so the shared widget stays mounted during navigation.

Replace YOUR_SERVICE_ID with the real service ID. The afterInteractive strategy controls when the banner script loads; it is not permission to load unrelated analytics scripts.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://polimeo.com/widget/YOUR_SERVICE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

2. Gate optional tools explicitly

Do not put optional analytics into an unconditional Script component. Keep it unmounted until the widget reports that the relevant category is allowed. Check getConsent() once the widget is ready, then use onConsentChange() for later decisions.

Readiness matters on a fresh page: the script and saved configuration load asynchronously. A Client Component can use next/script's onReady callback to subscribe before initialization completes. The API sequence below includes the initial read and later changes. Register the listener once in your shared root component.

// Call after the Polimeo widget is ready.
const consent = window.PremexConsent;
const apply = (choice) => {
  if (choice?.analytics) {
    // Mount your analytics component here.
  } else {
    // Keep it unmounted; disable any already-loaded vendor SDK.
  }
};
apply(consent.getConsent());
consent.onConsentChange(apply);
// Register once in the shared root, not on every route change.

3. Verify behaviour in a fresh session

With optional consent unset or declined, check the Network panel for requests to your analytics provider. They should not appear. Accept the category and check that the intended requests start. Navigate to another route and confirm that you do not install the widget twice.

Finally, reopen the banner with showBanner(), withdraw permission and verify the vendor-specific shutdown behaviour. Removing a React component alone does not necessarily remove cookies or stop an SDK that has already loaded.

  • No optional requests before a choice
  • Decline prevents optional initialization
  • Accept enables only the selected categories
  • Withdrawal is applied to already-loaded tools
  • Document links and settings are accessible on mobile

Common questions

Does afterInteractive wait for consent?

No. It is a Next.js loading strategy. Consent checks must be implemented separately for optional tools.

Does this implement Google Consent Mode?

No. This example gates script loading using Polimeo's category choices. A vendor-specific consent mode integration requires its own implementation and verification.

Further reading

Continue building

Make the first draft. Then make it yours.

Free, with no fixed expiry date. No credit card required.

See pricing and future-change terms