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

Introduction

*Updated for 2026 compliance practices.*

If you run a Next.js website that serves visitors from Spain, achieving proper cookie compliance is not just a legal checkbox—it’s a continuous technical challenge. The Spanish Data Protection Authority (AEPD) actively enforces GDPR and the national ePrivacy rules, often issuing fines for non-compliant cookie banners, pre-consent tracking, and missing disclosures. This guide provides a practical, step-by-step approach to implementing and testing cookie consent on a Next.js site, tailored to the Spanish regulatory environment. You’ll learn how to configure your consent management platform (CMP), integrate Google Consent Mode v2, validate your setup with GDPRChecker’s scanner, and avoid the most common pitfalls that trip up developers and site owners.

**What this guide covers:** - The specific requirements for cookie compliance in Spain and how they apply to Next.js applications. - A detailed implementation walkthrough, from choosing a CMP to configuring consent-aware tags. - Testing strategies using GDPRChecker to catch pre-consent network requests, banner behavior issues, and disclosure gaps. - A practical checklist and FAQ to keep your site compliant over time.

This is a technical implementation guide, not legal advice. Always consult a qualified privacy lawyer for your specific situation. For official references, see the European Data Protection Board and the GDPR.eu overview.

What Is Next.js Cookie Compliance in Spain?

Next.js cookie compliance in Spain refers to the set of technical and procedural measures required to ensure that a Next.js website respects Spanish and EU regulations when using cookies and similar tracking technologies. Spain enforces the GDPR through its national law (Ley Orgánica de Protección de Datos y Garantía de los Derechos Digitales) and the AEPD’s strict guidelines on cookie usage. For a Next.js site, this means:

• **Prior consent** must be obtained before any non-essential cookies are set or accessed on the user’s device.
• **Clear and comprehensive information** about the purposes, duration, and third-party recipients of cookies must be provided in a cookie banner and a detailed cookie policy.
• **Granular consent** options must allow users to accept or reject cookies by category (e.g., analytics, marketing).
• **Easy withdrawal** of consent must be possible at any time.
• **Proof of consent** must be stored for accountability.

Next.js introduces unique challenges because it can render pages on the server (SSR), statically generate them (SSG), or incrementally regenerate them (ISR). This means consent decisions must be respected consistently across rendering strategies. For example, if a user rejects analytics cookies, your Next.js app must not load Google Analytics scripts on the client side, and server-side rendered pages must not embed tracking pixels that fire before consent is given.

This guide focuses on the practical implementation and testing of these requirements using modern tools like Consent Mode v2 and GDPRChecker’s scanning capabilities. For a broader overview of GDPR obligations, see our GDPR checklist for small businesses.

Spanish Cookie Compliance Requirements and Expectations

Spain’s AEPD has been one of the most active EU regulators in cookie enforcement. In its updated guidelines, the AEPD emphasizes:

• **No cookie walls:** You cannot block access to your website if a user refuses non-essential cookies.
• **Reject button must be as prominent as the accept button:** A “Reject all” option must be immediately visible and equally easy to use.
• **Continued browsing is not valid consent:** Scrolling or clicking does not imply consent; an affirmative action is required.
• **Pre-consent tracking is prohibited:** No cookies (except strictly necessary ones) can be set before the user makes a choice.
• **Third-party cookies require extra scrutiny:** If you use services like Google Analytics, Facebook Pixel, or embedded YouTube videos, you must disclose these third parties and block their scripts until consent is obtained.

For Next.js developers, these rules translate into concrete technical requirements:

1. **Block scripts by default:** Your CMP or a custom wrapper must prevent third-party scripts from executing until consent is granted.
2. **Implement Consent Mode v2:** Google’s Consent Mode allows tags to adjust their behavior based on consent state, sending cookieless pings when consent is denied. This is especially important for Google Analytics and Google Ads. Learn more in our [Google Consent Mode v2 guide](/guides/google-consent-mode-v2-guide).
3. **Manage server-side cookies carefully:** If your Next.js API routes or middleware set cookies, you must check consent status before setting non-essential cookies.
4. **Keep consent records:** Store consent choices (with timestamps) in a secure, retrievable format. Many CMPs handle this, but you may need to integrate with your backend.

**Real-world example:** A Spanish e-commerce site using Next.js was fined because its cookie banner had a pre-ticked “Marketing” checkbox. The AEPD ruled that pre-ticked boxes do not constitute valid consent. After the fine, the site implemented a CMP with unchecked boxes by default and a clear “Reject all” button, then verified the fix with GDPRChecker.

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

Implementing cookie compliance in a Next.js project involves several layers: a consent management platform, tag management integration, and server-side considerations. Below is a practical, step-by-step approach.

Step 1: Choose and Install a Consent Management Platform (CMP)

Select a CMP that supports the IAB TCF v2.2 framework (if you run ads) and Google Consent Mode v2. Popular options include Cookiebot, OneTrust, and CookieYes. For this guide, we’ll assume a CMP that provides a JavaScript snippet to inject into your Next.js app.

• Install the CMP’s script in your custom `_document.js` or `_app.js` file. Place it in the `<Head>` to load early.
• Configure the CMP to block all non-essential scripts by default. Most CMPs offer automatic blocking if you add a `data-cookieconsent` attribute to script tags.

**Example:** ```javascript // pages/_app.js import Script from 'next/script'

export default function MyApp({ Component, pageProps }) { return ( <> <Script id="cookie-consent" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: ` window.cookieconsent.initialise({ // CMP configuration }); `, }} /> <Component {...pageProps} /> </> ) } ```

Step 2: Integrate Google Consent Mode v2

Google Consent Mode v2 is essential for Next.js sites using Google services. It allows tags to respect consent decisions without dropping all data. Implement it by adding the Consent Mode script before any Google tags.

• Set default consent states to `'denied'` for all categories except `'security_storage'` (which is strictly necessary).
• Update consent states when the user interacts with the CMP.

**Example:** ```javascript // components/ConsentMode.js import { useEffect } from 'react'

export default function ConsentMode() { useEffect(() => { // Define dataLayer and gtag function window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) }

// Set default consent to denied gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied', 'functionality_storage': 'denied', 'personalization_storage': 'denied', 'security_storage': 'granted', 'wait_for_update': 500, })

// Load Google Tag Manager or gtag.js after defaults are set // ... }, [])

return null } ```

For a deeper dive, see our comparison of Consent Mode v2 vs. Google Certified CMP.

Step 3: Conditionally Load Third-Party Scripts

In Next.js, you can use the `next/script` component with the `strategy` prop to control when scripts load. However, for consent-based loading, you often need a custom wrapper that checks consent before injecting scripts.

• Create a `ConsentWrapper` component that listens to CMP events and dynamically loads scripts when consent is granted.
• For Google Analytics, use the `gtag` function or GTM with Consent Mode triggers.

**Example:** ```javascript // components/ConsentWrapper.js import { useEffect, useState } from 'react' import Script from 'next/script'

export default function ConsentWrapper() { const [consentGiven, setConsentGiven] = useState(false)

useEffect(() => { // Listen to your CMP's consent event window.addEventListener('cookieconsent_consent_given', () => { setConsentGiven(true) }) }, [])

if (!consentGiven) return null

return ( <> <Script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" strategy="afterInteractive" /> <Script id="ga-init" strategy="afterInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); `} </Script> </> ) } ```

Step 4: Handle Server-Side Cookies

Next.js API routes and middleware can set cookies. Ensure you only set strictly necessary cookies server-side unless you have a mechanism to check consent. For example, session cookies for authentication are usually strictly necessary, but analytics cookies set via `Set-Cookie` headers are not.

• Use Next.js middleware to read a consent cookie (set by your CMP) and conditionally set other cookies.
• Avoid setting non-essential cookies in `getServerSideProps` or API routes without consent.

Step 5: Update Your Privacy and Cookie Policies

Your cookie banner must link to a detailed cookie policy that lists all cookies, their purposes, durations, and third-party recipients. In Spain, the AEPD expects this policy to be easily accessible and written in clear language. Use GDPRChecker’s scanner to verify that the policy link is present and that all declared cookies match what your site actually sets.

Common Mistakes and How to Avoid Them

Even well-intentioned developers make mistakes that can lead to non-compliance. Here are the most frequent issues we see in Next.js projects and how to fix them.

1. Pre-Consent Network Requests

**Mistake:** Loading analytics or marketing scripts before the user has given consent. This often happens when scripts are placed in `_document.js` without consent checks or when Next.js’s `<Script>` component uses `beforeInteractive` for non-essential scripts.

**How to avoid:** Always set default consent to denied and load scripts only after consent is updated. Use GDPRChecker’s scanner to detect any pre-consent requests. The scanner will flag requests to known tracking domains that fire before consent.

2. Missing or Ineffective Reject Button

**Mistake:** The cookie banner has an “Accept” button but the “Reject” option is hidden behind a settings link or is less prominent.

**How to avoid:** Ensure the “Reject all” button is as visually prominent as “Accept all.” Test this with GDPRChecker’s banner behavior checks, which verify that both options are present and equally accessible.

3. Incorrect Consent Mode Implementation

**Mistake:** Setting default consent to `'granted'` or not updating consent after user interaction. This causes Google tags to fire as if consent were given, even when it’s not.

**How to avoid:** Follow Google’s official Consent Mode documentation. Use GDPRChecker’s Consent Mode diagnostics to confirm that consent states are correctly passed to Google tags.

4. Ignoring Server-Side Rendering (SSR) Pitfalls

**Mistake:** Embedding tracking pixels in server-rendered HTML that execute before any client-side consent check.

**How to avoid:** Never include third-party tracking scripts in SSR output unless they are strictly necessary. Use client-side only loading with consent wrappers.

5. Not Testing After Changes

**Mistake:** Deploying a new feature or updating a script without re-scanning for compliance.

**How to avoid:** Integrate GDPRChecker into your CI/CD pipeline or manually scan after every significant change. This catches new cookies, missing disclosures, or broken consent flows.

How to Validate with GDPRChecker

GDPRChecker provides a comprehensive scanning engine that helps you verify every aspect of your Next.js cookie compliance. Here’s how to use it effectively.

1. Pre-Consent Request Scan

Run a scan to see which network requests fire before any consent is given. GDPRChecker will list all third-party domains contacted and highlight those that set cookies. If you see analytics or marketing domains, your implementation needs fixing.

2. Banner Behavior Check

GDPRChecker simulates user interactions with your cookie banner. It checks: - Is the banner displayed on first visit? - Are “Accept all” and “Reject all” options present and equally prominent? - Does the banner reappear if consent was previously given? (It should not, unless cookies were cleared.) - Is the privacy policy link present and working?

3. Consent Mode Diagnostics

If you use Google Consent Mode, GDPRChecker verifies that: - Default consent is set to denied for ad_storage and analytics_storage. - Consent updates are sent correctly after user interaction. - Google tags (gtag.js, GTM) respect the consent state.

4. Cookie Inventory and Classification

GDPRChecker crawls your site and builds a cookie inventory. It classifies cookies by category and checks if they are declared in your cookie policy. Any undeclared cookies are flagged.

5. Policy Link and Disclosure Verification

The scanner ensures that your cookie banner links to a valid cookie policy and that the policy contains all required information (cookie list, purposes, durations, third parties).

**Real-world example:** A Spanish news site used GDPRChecker after implementing a new CMP. The scan revealed that a legacy Twitter widget was still loading before consent. The team fixed the widget to load conditionally and rescanned to confirm compliance.

For a complete verification workflow, see our Google Consent Mode v2 checker guide.

Next.js Cookie Compliance Implementation Checklist

Use this checklist to ensure your Next.js site meets Spanish cookie compliance requirements. Re-verify after any code or configuration changes.

1. [ ] A CMP is installed and configured to block all non-essential scripts by default.
2. [ ] Google Consent Mode v2 is implemented with default consent set to denied for ad_storage and analytics_storage.
3. [ ] All third-party scripts (analytics, ads, social media) are loaded only after explicit consent.
4. [ ] The cookie banner displays a “Reject all” button as prominently as “Accept all.”
5. [ ] The banner links to a detailed cookie policy that lists all cookies, purposes, durations, and third parties.
6. [ ] No pre-consent network requests to tracking domains are detected by GDPRChecker.
7. [ ] Server-side rendered pages do not embed non-essential tracking pixels.
8. [ ] Consent records are stored and retrievable for accountability.
9. [ ] The site functions correctly when all non-essential cookies are rejected (no broken features).
10. [ ] A GDPRChecker scan confirms no undeclared cookies, correct banner behavior, and valid Consent Mode signals.
11. [ ] The privacy policy is updated and includes cookie-related disclosures.
12. [ ] Regular scans are scheduled (e.g., monthly or after major updates).

Comparison: Consent Mode v2 vs. Traditional Cookie Blocking

Understanding the difference between Consent Mode v2 and traditional cookie blocking helps you choose the right approach for your Next.js site.

| Feature | Consent Mode v2 | Traditional Cookie Blocking | |---------|-----------------|----------------------------| | **How it works** | Tags adjust behavior based on consent state; sends cookieless pings when consent denied. | Scripts are completely blocked until consent is given. | | **Data collection without consent** | Aggregated, anonymized data via cookieless pings (e.g., for modeling). | No data collected at all. | | **Implementation complexity** | Requires setting default consent and updating on user action; works with gtag or GTM. | Requires script wrappers and conditional loading logic. | | **Google service compatibility** | Required for Google Analytics 4 and Google Ads in EEA. | May break some Google services if not carefully managed. | | **Recovery of lost data** | Enables behavioral modeling in GA4 to fill gaps. | No data recovery; complete loss for non-consenting users. | | **Spanish AEPD compliance** | Acceptable if implemented correctly with proper defaults. | Acceptable but may result in less data. |

For most Next.js sites using Google services, Consent Mode v2 is the recommended path. It balances compliance with data utility. However, if you don’t use Google Ads, you might question whether you need a CMP at all—see our guide Do I need a CMP if I do not run Google Ads?.

Real-World Examples

Example 1: Spanish E-commerce Site A medium-sized online store built with Next.js was using Google Analytics and Facebook Pixel. Their initial implementation loaded both scripts in `_document.js` without consent checks. After a GDPRChecker scan flagged pre-consent requests, they: - Moved scripts to a client-side consent wrapper. - Implemented Consent Mode v2 for Google tags. - Added a CMP with a clear reject button. - Rescanned and confirmed zero pre-consent requests.

Example 2: Spanish News Portal A high-traffic news site used server-side rendering for performance. They had embedded a Twitter timeline widget that fired requests on every page load. GDPRChecker detected these as pre-consent third-party requests. The fix: - Replaced the server-embedded widget with a client-side component that loaded only after consent. - Updated the cookie policy to declare Twitter as a third party.

Example 3: SaaS Landing Page A SaaS company’s Next.js landing page had a simple cookie banner but no reject button—only an “Accept” button and a link to settings. The AEPD would consider this non-compliant. After reading this guide, they: - Redesigned the banner with equally prominent “Accept” and “Reject” buttons. - Verified with GDPRChecker’s banner behavior check.

FAQ

What is Next.js cookie compliance Spain cookie consent implementation and testing guide? This guide provides a technical walkthrough for implementing cookie consent on Next.js websites to comply with Spanish regulations. It covers CMP setup, Consent Mode v2 integration, server-side considerations, and testing with GDPRChecker to ensure no pre-consent tracking occurs and all disclosures are correct.

Do I need Next.js cookie compliance Spain cookie consent implementation and testing guide for GDPR? If your Next.js site serves users in Spain and uses non-essential cookies, you must comply with the GDPR and Spanish ePrivacy rules. This guide helps you implement the necessary technical measures, but you should also seek legal advice to ensure full compliance with all applicable laws.

How do I implement Next.js cookie compliance Spain cookie consent implementation and testing guide? Implement by: 1) installing a CMP that blocks scripts by default, 2) integrating Google Consent Mode v2 with denied defaults, 3) conditionally loading third-party scripts based on consent, 4) handling server-side cookies carefully, and 5) updating your privacy and cookie policies. Then test with GDPRChecker.

How can I verify Next.js cookie compliance Spain cookie consent implementation and testing guide with a scanner? Use GDPRChecker to scan your site. It checks for pre-consent network requests, banner behavior (presence and prominence of reject button), Consent Mode signals, cookie declarations, and policy links. Run scans after any changes to maintain compliance.

What are common Next.js cookie compliance Spain cookie consent implementation and testing guide mistakes? Common mistakes include: loading tracking scripts before consent, missing or hidden reject button, incorrect Consent Mode defaults, embedding trackers in SSR output, and failing to rescan after updates. GDPRChecker can catch all these issues.

Which cookies and trackers should I check for Next.js cookie compliance Spain cookie consent implementation and testing guide? Check all non-essential cookies and trackers: analytics (Google Analytics, Matomo), marketing (Facebook Pixel, Google Ads), social media widgets, and any third-party embeds. GDPRChecker’s cookie inventory will list all detected cookies and classify them.

How often should I review Next.js cookie compliance Spain cookie consent implementation and testing guide? Review whenever you add new scripts, update your CMP, or change your privacy policy. Additionally, schedule monthly scans with GDPRChecker to catch any unintended changes. The AEPD expects ongoing compliance, not a one-time fix.

What evidence should I keep for Next.js cookie compliance Spain cookie consent implementation and testing guide? Keep records of consent choices (timestamps, preferences), CMP configuration snapshots, cookie policy versions, and GDPRChecker scan reports. These demonstrate accountability and can be crucial if the AEPD investigates.

Conclusion

Achieving Next.js cookie compliance in Spain requires a blend of careful implementation and continuous verification. By following the steps in this guide—choosing a robust CMP, integrating Consent Mode v2, conditionally loading scripts, and rigorously testing with GDPRChecker—you can build a consent framework that respects user privacy and meets regulatory expectations. Remember, compliance is not a one-time task; it’s an ongoing process of monitoring and improvement.

**Ready to verify your Next.js site?** Run a free scan with GDPRChecker now to detect pre-consent requests, banner issues, and disclosure gaps. For deeper integrations, explore our Google Analytics GDPR compliance guide and GDPR checklist for small businesses.

Implementation checklist

1. Identify the pages, banners, tags, and vendors affected by the change.
2. Record the current configuration and policy version before making changes.
3. Define denied consent defaults before optional tags are allowed to run.
4. Test Reject all, Analytics only where offered, and Accept all in a clean browser session.
5. Check browser network activity for requests that fire before consent.
6. Confirm that the cookie disclosure and privacy notice match the live configuration.
7. Save the scan result, screenshots, and deployment reference as evidence.
8. Schedule a follow-up scan after future script, banner, or policy changes.

Next step

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

Article schema

```json { "@context": "https://schema.org", "@type": "Article", "headline": "Next.js Cookie Compliance in Spain: Cookie Consent Implementation and Testing Guide", "description": "Practical guide to Next.js cookie compliance in Spain. Step-by-step consent implementation, testing with GDPRChecker, and avoiding common mistakes. Ensure your Next.js site meets Spanish and GDPR requirements.", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.gdprchecker.online/guides/next-js-cookie-compliance-in-spain-cookie-consent-implementation-and-testing-gui" }, "publisher": { "@type": "Organization", "name": "GDPRChecker", "url": "https://www.gdprchecker.online" } } ```

Copyright and editorial notice