How to Install a Cookie Banner on Next.js 12 and Below: A Practical Compliance Guide

Introduction

*Updated for 2026 compliance practices.*

If you run a website built with Next.js 12 or an earlier version, you may need to **install a cookie banner** to meet GDPR and ePrivacy requirements. This practical guide walks you through the technical steps, common pitfalls, and how to verify your setup using GDPRChecker’s scanner. We focus on Next.js 12 and below because these versions use the Pages Router and have specific considerations for client-side script injection and consent management.

Requirements and Compliance Expectations

Before you implement, understand what regulators expect. Under the GDPR and ePrivacy Directive, you must:

**Obtain prior consent** for non-essential cookies and trackers (e.g., analytics, advertising).
**Provide clear information** about what data you collect and why.
**Allow users to refuse** as easily as they can accept.
**Block tags** before consent is given.
**Keep records** of consent for accountability.

For Next.js 12 sites, this means your banner must be able to control scripts that are loaded via `next/script` or third-party integrations. Google’s Consent Mode allows tags to adjust their behavior based on consent state, but you still need a banner to capture that consent. Note that this guide provides technical implementation guidance, not legal advice. Always consult a privacy lawyer for your specific situation.

Common Mistakes and How to Avoid Them

Many Next.js 12 sites make these errors when installing a cookie banner:

**Loading the CMP too late:** If the script loads after other tags, those tags may fire before consent is captured. Always use `beforeInteractive` or place the script early in the `<head>`.
**Not blocking tags pre-consent:** Simply showing a banner isn’t enough. You must actively prevent tags from loading until consent is given. This can be done via your CMP’s blocking mechanism or by wrapping tags in consent checks.
**Ignoring server-side rendering (SSR):** Next.js 12 supports SSR, but consent banners are client-side. Ensure your banner doesn’t cause hydration mismatches. Avoid rendering banner HTML on the server; let the CMP script inject it.
**Forgetting to update the privacy policy:** Your banner must link to a compliant privacy policy that details cookie usage. Use GDPRChecker’s legal-page workflows (available on paid plans) to keep policies in sync.
**Not testing the reject flow:** Many sites only test the accept path. Regulators expect that rejecting is as easy as accepting. Verify that all non-essential scripts are blocked when the user clicks “Reject.”
**Overlooking Google Consent Mode integration:** If you use Google services without Consent Mode, you may be sending data without consent. Check out our guide on [Consent Mode v2 vs Google Certified CMP](/guides/consent-mode-v2-vs-google-certified-cmp) for more details.

How to Validate Your Setup with GDPRChecker

After installing your cookie banner, you need to verify it works correctly. GDPRChecker’s scanner can help you validate pre-consent network requests, banner behavior, and disclosure gaps after changes. Here’s how:

**Run a public scan:** Enter your Next.js site URL into the GDPRChecker scanner. It will crawl your pages and report on cookies, trackers, and consent banner presence.
**Check pre-consent requests:** The scanner identifies network requests that fire before consent. If you see analytics or ad requests in the “pre-consent” category, your blocking isn’t working.
**Test the banner interaction:** Use the scanner’s advanced diagnostics (available on Growth plans) to simulate user interactions and verify that consent states update correctly.
**Review the cookie inventory:** GDPRChecker provides a detailed inventory of all detected cookies and trackers. Ensure each one is categorized correctly and covered by your consent settings.
**Monitor over time:** Set up recurring scans to catch new trackers or configuration drift. This is especially important if you frequently update your Next.js site.

For a deeper dive, see our guide on how to add a cookie banner to a website.

Real-World Examples

Example 1: E-commerce Site on Next.js 12

An online store uses Google Analytics 4 and Facebook Pixel. They install a CMP script in `_document.js` with Consent Mode defaults set to denied. After testing, they find that the Facebook Pixel still fires on page load. They fix this by adding the Pixel through Google Tag Manager with a consent trigger. A GDPRChecker scan confirms no pre-consent ad requests.

Example 2: SaaS Marketing Page

A SaaS company’s Next.js 12 marketing site uses Hotjar and LinkedIn Insights. They implement a banner but forget to block Hotjar. A GDPRChecker scan reveals Hotjar requests before consent. They update their CMP configuration to block Hotjar until consent is given.

Example 3: Blog with Ads

A blogger uses Next.js 12 and Google AdSense. They set up a consent banner but don’t integrate with Google Consent Mode. As a result, personalized ads may be served without consent. After reading about cookie banner requirements, they implement Consent Mode and verify with GDPRChecker that ad requests now respect consent.

Implementation Checklist

Choose a CMP that supports your compliance needs (e.g., Google Consent Mode v2).
Add the CMP script to `pages/_document.js` with `strategy="beforeInteractive"`.
Set default consent states (denied for non-essential) via an inline script before the CMP.
Integrate Google Tag Manager or gtag.js with consent triggers.
Ensure all third-party scripts (analytics, ads, etc.) are blocked pre-consent.
Link your cookie banner to an up-to-date privacy policy.
Test the banner on multiple browsers and devices: accept, reject, and partial consent flows.
Run a GDPRChecker scan to verify pre-consent network requests and banner behavior.
Check for any cookies or trackers not covered by your consent categories.
Set up recurring scans to monitor ongoing compliance.
Keep records of consent configurations and scan results for accountability.
Review and update your setup whenever you add new scripts or change data processing.

FAQ

What is install cookie banner on next js 12 and below versions? It refers to the process of adding a consent management banner to a website built with Next.js version 12 or earlier. This involves integrating a CMP script into the app’s document or app component to control cookies and trackers in compliance with GDPR and ePrivacy regulations.

Do I need install cookie banner on next js 12 and below versions for GDPR? If your Next.js 12 site uses non-essential cookies or trackers (e.g., analytics, ads) and serves users in the EU/EEA, you likely need a cookie banner to obtain valid consent. Even if you don’t run Google Ads, other trackers may require consent. See our guide on GDPR compliance for SaaS companies for broader context.

How do I implement install cookie banner on next js 12 and below versions? Implement by adding a CMP script to `_document.js` or `_app.js` with early loading strategy, setting default consent states, and configuring your tag manager to respect consent. Test thoroughly to ensure tags are blocked before consent. Refer to the step-by-step section above for details.

How can I verify install cookie banner on next js 12 and below versions with a scanner? Use GDPRChecker’s scanner to crawl your site and check for pre-consent network requests, banner presence, and cookie disclosures. It identifies gaps like tags firing before consent. Run scans after implementation and periodically to maintain compliance.

What are common install cookie banner on next js 12 and below versions mistakes? Common mistakes include loading the CMP too late, not blocking tags pre-consent, ignoring SSR hydration issues, forgetting to update the privacy policy, not testing the reject flow, and overlooking Google Consent Mode integration. Each can lead to non-compliance.

Which cookies and trackers should I check for install cookie banner on next js 12 and below versions? Check all non-essential cookies and trackers, including analytics (Google Analytics, Hotjar), advertising (Facebook Pixel, Google Ads), and functional tools that aren’t strictly necessary. GDPRChecker’s scanner provides a full inventory to review.

How often should I review install cookie banner on next js 12 and below versions? Review your cookie banner setup at least quarterly, or whenever you add new scripts, update your site, or change data processing. Regular GDPRChecker scans can alert you to new trackers or configuration issues.

What evidence should I keep for install cookie banner on next js 12 and below versions? Keep records of your CMP configuration, consent logs (if available), privacy policy versions, and scan reports from GDPRChecker. This documentation demonstrates accountability under GDPR. For more on evidence, see our article on what is ePrivacy.

Conclusion

Installing a cookie banner on Next.js 12 and below is a critical step for GDPR compliance, but it’s not just about adding a snippet. You must configure it to block tags pre-consent, integrate with tools like Google Consent Mode, and regularly validate your setup. Use this guide to implement correctly, avoid common pitfalls, and leverage GDPRChecker’s scanner to ensure ongoing compliance. Ready to verify your site? Run a free scan now and close the consent gap.

Article schema

```json { "@context": "https://schema.org", "@type": "Article", "headline": "How to Install a Cookie Banner on Next.js 12 and Below: A Practical Compliance Guide", "description": "Learn how to install a cookie banner on Next.js 12 and below versions for GDPR compliance. Step-by-step implementation, common mistakes, and validation with GDPRChecker scanner.", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.gdprchecker.online/guides/install-cookie-banner-on-next-js-12-and-below-versions" }, "publisher": { "@type": "Organization", "name": "GDPRChecker", "url": "https://www.gdprchecker.online" } } ```

Copyright and editorial notice

This original AI-assisted editorial draft was selected, reviewed, and published by GDPRChecker. All rights are reserved where protected by applicable law. Do not reproduce the article without permission.

Introduction

What is Install a Cookie Banner on Next.js 12 and Below: A Practical Compliance?

What Does It Mean to Install a Cookie Banner on Next.js 12 and Below?

Requirements and Compliance Expectations

How to Implement a Cookie Banner Step by Step