You’ve built a beautiful React application. Your components are clean, your state management is solid, and your user experience is smooth. Then someone from legal asks: “Are we GDPR compliant with our cookies?”
If you’re like most developers, cookie consent wasn’t part of your React training. You know how to manage state and handle side effects, but navigating privacy regulations while maintaining a good user experience is a different challenge entirely. The good news? Implementing react cookie consent doesn’t have to derail your sprint. This guide walks you through everything you need to know—from understanding the legal requirements to shipping production-ready code for Next.js applications.
We’ll cover both custom implementations and library-based approaches, with real TypeScript examples you can adapt to your project. Whether you’re working with the App Router, Pages Router, or need to integrate with Google Analytics and other third-party scripts, you’ll have a clear path forward by the end of this tutorial.
Understanding GDPR Requirements for JavaScript Applications
GDPR isn’t just about showing a banner—it’s about giving users genuine control over their data. For React developers, this means understanding three core requirements that directly impact how you architect your application.
Explicit Consent Before Tracking
You cannot set non-essential cookies or fire tracking scripts until a user explicitly opts in. This is stricter than you might think. That Google Analytics snippet you’re used to dropping in your _document.js? It needs to wait. Facebook Pixel? Same story. The only exceptions are cookies strictly necessary for your site to function—like session tokens or shopping cart data.
Granular Control
Users must be able to accept or reject different categories of cookies independently. Common categories include:
- Strictly Necessary: Authentication, security, basic functionality
- Analytics: Google Analytics, Mixpanel, Hotjar
- Marketing: Facebook Pixel, Google Ads, retargeting pixels
- Functional: Chat widgets, video embeds, preference storage
The Single-Page Application Challenge
Traditional server-rendered sites can check consent on each page load. SPAs like React apps don’t work that way. Your application loads once, then JavaScript handles navigation. This means your consent logic needs to check consent status before mounting components, persist preferences across navigation, handle script loading dynamically, and manage consent changes without page reloads.
For Next.js specifically, you also need to consider where consent checks happen. Server-side rendering means some code runs on the server (where there’s no consent yet), while other code runs in the browser (where consent matters). This split execution model requires careful planning.
Evaluating Implementation Approaches
You have two main paths: build a custom solution or integrate an existing library. Each has clear tradeoffs that depend on your project’s constraints.
Building Custom: When It Makes Sense
A custom implementation gives you complete control over the UI, data flow, and integration points. This approach works well when you have specific design requirements, your application already has robust state management, you need to integrate with custom analytics, or you want to minimize bundle size.
Using Libraries: The Pragmatic Choice
Libraries like react-cookie-consent handle the heavy lifting. They’re battle-tested across thousands of sites and stay updated with regulatory changes. For most projects, starting with a library is recommended unless you have compelling reasons to build custom.
Building a Custom React Cookie Consent Component
Let’s build a production-ready consent component from scratch using TypeScript, React Context for state management, and localStorage for persistence.
Core Consent Context
Create a context to manage consent state across your application. This involves creating types for consent preferences, a context provider that handles loading and saving preferences, and a custom hook for easy access throughout your app.
Next.js Implementation Strategies
Next.js adds complexity because of its hybrid rendering model. Here’s how to handle consent in both the App Router and Pages Router.
App Router Implementation
With the App Router, wrap your application with the consent provider in your root layout. For server components that need consent information, you’ll need to check cookies on the server side using the cookies API.
Handling Hydration Mismatches
One gotcha with Next.js: if you check localStorage during server-side rendering, you’ll get hydration errors. Always check consent in a useEffect or client component to avoid these issues.
Blocking Third-Party Scripts Until Consent
The most critical part of Next.js GDPR compliance is preventing tracking scripts from loading until users consent. Instead of adding GA directly to your HTML, load it conditionally based on consent state.
Google Tag Manager Approach
GTM is the cleanest way to handle cookie banner compliance because you can control all tags from one place. Configure your tags to fire only when consent variables are set to ‘granted’. This centralizes your tracking logic and makes it easier to add new tools without code changes.
Testing and Validation
Before deploying, verify that your banner appears on first visit, all consent options work correctly, preferences persist across page reloads, and scripts only load when appropriate consent is granted.
Production Best Practices
Optimize consent checks for performance by caching state in memory, debouncing change events, and lazy-loading the consent banner. Set up a maintenance schedule to review categories quarterly and update when regulations change.
Conclusion
Implementing react cookie consent in Next.js requires attention to both technical implementation and user experience. The key takeaways: check consent before loading non-essential scripts, provide granular control, handle Next.js hybrid rendering carefully, test thoroughly, and maintain your implementation as regulations evolve.
Remember that cookie consent isn’t just about avoiding fines—it’s about building trust with your users.
If you want to skip the implementation complexity and focus on building your product, CookieTrust.io provides a fully managed cookie consent solution that handles all the compliance details for you. Get started with a free trial and have GDPR-compliant cookie consent running in under 10 minutes.
