Next.js Cookie Compliance in Belgium: Cookie Consent Implementation and Testing Guide

Introduction

*Updated for 2026 compliance practices.*

If you run a Next.js website that serves users in Belgium, achieving proper cookie compliance is not just a legal checkbox—it’s a technical challenge that demands careful implementation and ongoing verification. This guide walks you through the practical steps to implement cookie consent in a Next.js application, test it thoroughly, and maintain compliance under the strict Belgian interpretation of the GDPR and ePrivacy rules. We’ll focus on actionable techniques, common pitfalls, and how to use GDPRChecker’s scanning tools to validate your setup. Remember, this is technical implementation guidance, not legal advice. For legal questions, consult a qualified privacy professional.

What Is Next.js Cookie Compliance in Belgium?

Next.js cookie compliance in Belgium refers to the process of ensuring that a Next.js website meets Belgian and EU requirements for obtaining valid user consent before setting non-essential cookies or trackers. Belgium enforces the GDPR and the ePrivacy Directive through the Belgian Data Protection Authority (APD/GBA), which expects clear, affirmative consent for cookies that are not strictly necessary. For Next.js developers, this means integrating a consent management platform (CMP) or building a custom consent mechanism that blocks cookies and tracking scripts until the user makes a choice. The implementation must cover client-side and server-side cookies, third-party tags, and any data sent to external services like Google Analytics or Meta Pixel. Testing is equally critical: you need to verify that no non-essential cookies fire before consent, that the consent banner behaves correctly, and that your privacy policy is properly linked and disclosed.

Requirements and Compliance Expectations in Belgium

Belgian cookie compliance is grounded in the GDPR and the ePrivacy Directive, as interpreted by the APD/GBA. The key expectations include:

• **Prior consent**: Non-essential cookies (e.g., analytics, advertising, social media) must not be set or read before the user has given explicit consent. This means your Next.js site must block such cookies by default.
• **Granular choice**: Users should be able to accept or reject cookies by category (e.g., functional, analytics, marketing). A simple “OK” button is insufficient.
• **Easy withdrawal**: Consent must be as easy to withdraw as it is to give. Your site should provide a persistent mechanism (e.g., a floating button) to change preferences.
• **Transparent information**: The consent banner must clearly explain what cookies are used, for what purposes, and who processes the data. A link to the full privacy/cookie policy is mandatory.
• **Proof of consent**: You must keep records of consent choices, including timestamps and the consent text shown. This is where GDPRChecker’s consent monitoring can help.

For Next.js, these requirements translate into technical controls: you must conditionally load scripts based on consent state, configure your tag manager to respect consent signals, and ensure that any server-side cookies (e.g., session cookies) are classified correctly. Belgium’s regulator has been active in enforcing these rules, so thorough implementation and testing are essential.

How to Implement Cookie Consent in Next.js Step by Step

Implementing cookie consent in a Next.js application involves several layers: a consent banner UI, consent state management, script blocking, and integration with analytics and marketing tools. Below is a step-by-step approach using a consent management platform (CMP) or a custom solution.

1. Choose a Consent Management Approach

You have two main options: - **Use a third-party CMP**: Services like Cookiebot, CookieYes, or OneTrust provide a managed consent banner, automatic cookie scanning, and consent storage. They often offer a Next.js-friendly script that you can inject via a custom `_document.js` or `Script` component. - **Build a custom consent solution**: If you need full control, you can create a React context to manage consent state and use Next.js’s `Script` component with the `strategy` prop to control when scripts load.

For most teams, a CMP is faster to deploy and easier to maintain. However, ensure your CMP supports Google Consent Mode v2 if you use Google services (more on that later).

2. Install and Configure the Consent Banner

If using a CMP, you’ll typically add a script tag to your Next.js `_app.js` or `layout.js` (for App Router). For example:

```jsx // pages/_app.js or app/layout.js import Script from 'next/script'

export default function MyApp({ Component, pageProps }) { return ( <> <Script id="cookie-consent" strategy="beforeInteractive" src="https://consent.cookiebot.com/uc.js" data-cbid="your-cbid" type="text/javascript" /> <Component {...pageProps} /> </> ) } ```

For a custom solution, you’d create a consent context and a banner component that sets a cookie or localStorage key when the user makes a choice. Then, conditionally render tracking scripts based on that state.

3. Implement Google Consent Mode v2

If you use Google Analytics 4 (GA4), Google Ads, or Floodlight, you must implement Google Consent Mode v2 to respect consent signals. Consent Mode adjusts how Google tags behave based on the user’s consent choices. In Next.js, you can integrate Consent Mode by:

• Adding the Consent Mode initialization script before any Google tags.
• Updating consent state when the user interacts with your banner.

Example initialization:

```jsx <Script id="gtm-consent" strategy="beforeInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', { 'analytics_storage': 'denied', 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'functionality_storage': 'granted', 'personalization_storage': 'denied', 'security_storage': 'granted', 'wait_for_update': 500, }); `} </Script> ```

Then, when consent is granted, call `gtag('consent', 'update', { ... })` with the appropriate grants. This ensures that Google tags only use cookies for consented purposes.

4. Block Non-Essential Scripts Before Consent

Even with Consent Mode, you should physically block non-essential scripts until consent is given. In Next.js, you can use the `Script` component’s `strategy` prop to defer loading:

```jsx <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" strategy="afterInteractive" // Only load if consent given {...(hasConsent ? {} : { strategy: 'worker' })} /> ```

A more robust approach is to use a consent-aware wrapper that only renders scripts when the corresponding consent category is true. For server-side cookies (e.g., `Set-Cookie` headers), ensure that non-essential cookies are not set on initial requests. This may require middleware or API route logic that checks for an existing consent cookie.

5. Handle Server-Side Rendering (SSR) and Cookies

Next.js can set cookies on the server (e.g., for authentication). You must classify these cookies correctly. Strictly necessary cookies (like session tokens) can be set without consent, but you should still disclose them in your cookie policy. For any server-side cookie that is not strictly necessary, you should not set it until the user has consented. This can be tricky because the consent state is typically stored in a client-side cookie. One pattern is to set a consent cookie on the client and then read it in subsequent server requests to conditionally set other cookies.

6. Test the Implementation

After implementation, rigorous testing is crucial. Use GDPRChecker’s scanner to verify: - No non-essential cookies or network requests fire before consent. - The consent banner appears correctly and blocks interaction until a choice is made. - The privacy policy link is present and functional. - Rejecting all cookies actually prevents them from being set. - Changing preferences later updates the cookie behavior.

Manual testing in incognito mode is also recommended. Check the browser’s developer tools (Application > Cookies) to see what cookies are set before and after consent.

Common Mistakes and How to Avoid Them

Even well-intentioned implementations can fall short. Here are the most frequent mistakes we see in Next.js cookie compliance, especially for Belgian sites:

1. **Pre-consent data leakage**: Scripts like Google Analytics or Facebook Pixel fire on page load before the user has consented. This happens when the script is loaded with `strategy="afterInteractive"` without a consent check. **Fix**: Always gate non-essential scripts behind a consent condition, or use Consent Mode to ensure they operate in a cookieless mode until consent.
2. **Missing “Reject All” button**: Belgian guidance requires that rejecting cookies is as easy as accepting them. If your banner only has an “Accept” button and a link to settings, you’re likely non-compliant. **Fix**: Include a prominent “Reject All” or “Only Necessary” button at the same level as the “Accept All” button.
3. **Ignoring server-side cookies**: Developers often focus on client-side scripts but forget that Next.js API routes or server actions might set cookies. **Fix**: Audit all `Set-Cookie` headers and ensure non-essential ones are only set after consent.
4. **Not updating consent after changes**: If you add new cookies or trackers, you must re-obtain consent. Many sites fail to re-prompt users. **Fix**: Version your consent and re-show the banner when the cookie policy changes.
5. **Incomplete disclosure**: The banner must list all cookie categories and their purposes. A vague “We use cookies for analytics” is not enough. **Fix**: Provide a clear, detailed cookie policy and link to it from the banner.
6. **Consent Mode misconfiguration**: Setting default consent to `granted` or forgetting to update consent state after user interaction. **Fix**: Always start with `denied` for non-essential categories and update only after explicit consent.

How to Validate with GDPRChecker

GDPRChecker provides a suite of scanning tools that are ideal for verifying your Next.js cookie compliance. Here’s how to use it effectively:

• **Pre-consent scan**: Run a scan on your site while blocking all cookies (or before interacting with the banner). GDPRChecker will list all network requests and cookies set. Verify that only strictly necessary cookies appear.
• **Banner behavior check**: The scanner can detect whether a consent banner is present, if it blocks interaction, and if it includes required elements like a privacy policy link.
• **Post-consent scan**: After accepting cookies, run another scan to confirm that the expected analytics and marketing cookies are now set.
• **Reject-flow testing**: Use the scanner to simulate a “Reject All” action and ensure no non-essential cookies are set.
• **Consent Mode diagnostics**: If you use Google Consent Mode, GDPRChecker can check if the consent signals are correctly sent to Google tags.

Regular scanning is essential, especially after deploying updates to your Next.js site or adding new third-party services. GDPRChecker’s monitoring features (available on paid plans) can alert you to compliance drift over time.

Implementation Checklist

Use this checklist to ensure your Next.js cookie compliance implementation is complete and testable:

1. [ ] Identify all cookies and trackers used on your site (both client-side and server-side).
2. [ ] Classify each cookie as strictly necessary or non-essential.
3. [ ] Choose a consent management approach (CMP or custom).
4. [ ] Implement a consent banner with “Accept All”, “Reject All”, and granular options.
5. [ ] Ensure the banner appears before any non-essential scripts run.
6. [ ] Configure Google Consent Mode v2 with default `denied` for all non-essential categories.
7. [ ] Block all non-essential scripts and cookies until explicit consent is given.
8. [ ] Add a persistent mechanism (e.g., floating button) for users to change consent.
9. [ ] Link to a comprehensive privacy/cookie policy from the banner.
10. [ ] Test pre-consent state: no non-essential cookies or requests.
11. [ ] Test post-consent state: consented cookies are set correctly.
12. [ ] Test reject flow: rejecting all cookies prevents them from being set.
13. [ ] Set up regular scanning with GDPRChecker to monitor ongoing compliance.

FAQ

What is Next.js cookie compliance Belgium cookie consent implementation and testing guide? It’s a practical resource for developers and website owners who need to implement and verify cookie consent on Next.js sites serving Belgian users. The guide covers technical setup, legal requirements under Belgian GDPR enforcement, and testing methods using tools like GDPRChecker.

Do I need Next.js cookie compliance Belgium cookie consent implementation and testing guide for GDPR? If your Next.js site targets users in Belgium, yes. Belgium enforces GDPR and ePrivacy rules strictly, requiring prior consent for non-essential cookies. This guide helps you implement the necessary technical controls and validate them to avoid fines and build user trust.

How do I implement Next.js cookie compliance Belgium cookie consent implementation and testing guide? Start by auditing your cookies, then integrate a consent banner (via a CMP or custom code) that blocks non-essential scripts until consent. Configure Google Consent Mode v2 if you use Google services. Finally, test thoroughly with browser tools and GDPRChecker scans.

How can I verify Next.js cookie compliance Belgium cookie consent implementation and testing guide with a scanner? Use GDPRChecker to scan your site before and after consent. Check for pre-consent network requests, banner behavior, and cookie setting. The scanner can also validate Consent Mode signals and detect missing policy links.

What are common Next.js cookie compliance Belgium cookie consent implementation and testing guide mistakes? Common mistakes include pre-consent data leakage, missing “Reject All” button, ignoring server-side cookies, not updating consent after policy changes, incomplete disclosures, and Consent Mode misconfiguration. Regular testing helps catch these issues.

Which cookies and trackers should I check for Next.js cookie compliance Belgium cookie consent implementation and testing guide? Check all analytics (e.g., Google Analytics), advertising (e.g., Meta Pixel), social media, and any third-party embedded content cookies. Also review server-side cookies set by Next.js API routes or middleware.

How often should I review Next.js cookie compliance Belgium cookie consent implementation and testing guide? Review your implementation whenever you add new cookies, update your site, or change third-party services. Additionally, schedule regular scans (e.g., monthly) with GDPRChecker to catch unintended changes or compliance drift.

What evidence should I keep for Next.js cookie compliance Belgium cookie consent implementation and testing guide? Keep records of consent choices (timestamps, consent text), cookie audit logs, and scan reports from GDPRChecker. These demonstrate compliance if challenged by the Belgian Data Protection Authority.

Next Steps for Your Next.js Site

Achieving cookie compliance in Belgium for your Next.js site is an ongoing process, not a one-time fix. Start by scanning your site with GDPRChecker to identify current gaps. Then, follow the implementation steps above, and re-scan to confirm everything works. For deeper guidance on related topics, explore our guides on GDPR checklist for small businesses, Google Analytics GDPR compliance, and Google Consent Mode v2. If you’re evaluating consent tools, our comparison of Consent Mode v2 vs Google Certified CMP and the question Do I need a CMP if I do not run Google Ads? can help. Finally, use the Google Consent Mode v2 checker to validate your setup.

Ready to verify your implementation? Run a free scan with GDPRChecker now and close any compliance gaps before they become a problem.

Next step

Run a GDPRChecker scan to validate consent behavior, trackers, and disclosures after you implement the checklist above.

Comparison: common implementation approaches

| Approach | Best for | Evidence to retain | Trade-off | | --- | --- | --- | --- | | A shared consent record | Smaller sites with one banner and a limited set of tags | Consent choice, timestamp, policy version, and affected pages | Requires a reliable process when the banner changes | | A tag-manager based record | Teams that control analytics and advertising tags centrally | Consent defaults, trigger conditions, publish history, and test results | Can miss scripts added outside the tag manager | | A CMP or external consent platform export | Sites with multiple domains, vendors, or regional workflows | Vendor configuration, consent events, retention settings, and audit exports | Adds provider configuration and recurring review work |

Choose the approach that matches the site's tracking complexity, then verify that the stored evidence can explain what a visitor saw and what tags were allowed at that time.

Practical examples

Example 1: A small ecommerce site

A shop changes its cookie banner wording before a seasonal campaign. The operator records the previous and new banner version, tests Reject all and Accept all, and stores screenshots plus the resulting network checks. That creates a clear before-and-after record without relying on memory.

Example 2: A B2B lead-generation site

A marketing team adds a form analytics tag through its tag manager. Before publishing, it documents the consent category, the tag trigger, the privacy notice update, and a test showing that the request does not fire after a visitor rejects optional cookies.

Example 3: A multi-page content site

An editor notices that a new embedded video adds a third-party request. The team scans the affected pages, compares the result with the last scan, updates the cookie disclosure if necessary, and keeps the scan report with the deployment reference.

Article schema

```json { "@context": "https://schema.org", "@type": "Article", "headline": "Next.js Cookie Compliance in Belgium: Cookie Consent Implementation and Testing Guide", "description": "A practical guide to implementing and testing cookie consent in Next.js for Belgian GDPR compliance. Step-by-step setup, common mistakes, and verification with GDPRChecker.", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.gdprchecker.online/guides/next-js-cookie-compliance-in-belgium-cookie-consent-implementation-and-testing-g" }, "publisher": { "@type": "Organization", "name": "GDPRChecker", "url": "https://www.gdprchecker.online" } } ```

Copyright and editorial notice