How to Handle Cookie Consent in Any Next.js App

In today's web development environment, handling cookie consent is crucial for meeting privacy regulations like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA). Cookies are often used for tracking user activities, personalizing content, or gathering analytics, but collecting this data requires user consent in many jurisdictions. As developers, it's our responsibility to ensure compliance and create a transparent user experience.

In this article, we’ll cover how to handle cookie consent in any Next.js application, focusing on creating a cookie consent banner, managing cookies based on user actions, and ensuring compliance with privacy laws.

Why Is Cookie Consent Important?

1. Legal Compliance: GDPR and CCPA regulations require websites to obtain explicit consent before collecting non-essential cookies like tracking or marketing cookies.
2. User Transparency: A cookie consent banner lets users know what kind of data is being collected and gives them the power to control their privacy.
3. User Experience: It improves trust by showing that your website respects user privacy and offers an easy way to manage cookie preferences.

Steps to Implement Cookie Consent in a Next.js App

Let’s go through the steps to add a cookie consent banner to your Next.js application.

Step 1: Install Cookie Consent Library

Although you can handle cookie consent manually, using a library makes the process easier. One of the most commonly used libraries for cookie consent in React/Next.js apps is react-cookie-consent. You can install it by running the following command:

npm install react-cookie-consent
# or using Yarn
yarn add react-cookie-consent

Step 2: Create a Cookie Consent Component

Once the library is installed, we’ll create a component that displays a cookie consent banner. This banner will inform the user about the use of cookies and provide the option to accept or decline them.

Create a new component in components/CookieConsentBanner.js:

import React from "react";
import CookieConsent from "react-cookie-consent";
import Link from "next/link";

const CookieConsentBanner = () => {
  return (
    <CookieConsent
      location="bottom"
      buttonText="Accept All"
      declineButtonText="Decline"
      enableDeclineButton
      cookieName="yourAppCookieConsent"
      style={{ background: "#2B373B", color: "#FFF" }}
      buttonStyle={{ backgroundColor: "#4CAF50", color: "#FFF", fontSize: "14px" }}
      declineButtonStyle={{ backgroundColor: "#f44336", color: "#FFF", fontSize: "14px" }}
      expires={365}  // Number of days before the cookie expires
      onAccept={() => {
        // Add functionality when user accepts cookies
        console.log("Cookies accepted");
      }}
      onDecline={() => {
        // Add functionality when user declines cookies
        console.log("Cookies declined");
      }}
    >
      This website uses cookies to enhance your experience. By using our website, you consent to the use of cookies. 
      You can read more in our <Link href="/privacy-policy"><a>privacy policy</a></Link>.
    </CookieConsent>
  );
};

export default CookieConsentBanner;

Key Features:

• location: Sets the location of the banner (bottom in this case).
• onAccept: Adds logic for what happens when the user accepts cookies (you could, for example, set certain cookies here).
• onDecline: Defines behavior when the user declines cookies.
• enableDeclineButton: Allows users to decline cookies with a dedicated button.
• cookieName: The name of the cookie where the consent state is stored.

Step 3: Add the Cookie Consent Banner to the Global Layout

To display the cookie consent banner across all pages, integrate it into the main layout of your app. Typically, this can be done in pages/_app.js or pages/_app.tsx.

Here’s how you can include the CookieConsentBanner component:

import CookieConsentBanner from "../components/CookieConsentBanner";
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* Your global layout like header/footer */}
      <Component {...pageProps} />
      {/* Add the Cookie Consent Banner */}
      <CookieConsentBanner />
    </>
  );
}

export default MyApp;

By placing it in _app.js, the banner will be displayed on every page in your Next.js app, ensuring that no matter where the user navigates, they will have a chance to give their consent.

Step 4: Add a Privacy Policy Page (Optional)

To make your app more transparent, you should provide a link to your privacy or cookie policy, where users can learn more about how cookies are used. This link was added in the cookie consent banner (<Link href="/privacy-policy"><a>privacy policy</a></Link>).

Here’s a basic privacy policy page (pages/privacy-policy.js):

import React from 'react';

const PrivacyPolicy = () => {
  return (
    <div>
      <h1>Privacy Policy</h1>
      <p>This is where you describe how your website collects, uses, and stores data, including cookies.</p>
      {/* Add your privacy and cookie details */}
    </div>
  );
};

export default PrivacyPolicy;

Step 5: Testing and Debugging

To make sure everything works as expected, you should:

• Test on Different Browsers: Ensure the cookie consent banner appears correctly across various browsers and screen sizes.
• Check Cookie Storage: After the user accepts or declines cookies, use the browser’s developer tools to inspect the stored cookies.
• Update Analytics Tools (if needed): Integrate analytics or tracking tools like Google Analytics only after the user consents to cookies. You can add tracking code dynamically within the onAccept handler of the cookie consent banner.

Step 6: Customizing Cookie Behavior

You can set specific behavior for different types of cookies (e.g., analytics, advertising) based on user consent. Here's an example of setting a custom cookie when a user accepts analytics cookies:

import Cookies from 'js-cookie';

const onAcceptCookies = () => {
  // Set your custom cookies
  Cookies.set('analytics', 'enabled', { expires: 365 });
  console.log("Analytics cookies enabled");
};

const CookieConsentBanner = () => {
  return (
    <CookieConsent
      onAccept={onAcceptCookies}
      // Other props...
    >
      {/* Your consent message */}
    </CookieConsent>
  );
};

This approach allows you to handle different cookie categories and activate them only after the user provides explicit consent.

Conclusion

By implementing a cookie consent banner in your Next.js application, you can ensure compliance with data privacy laws like GDPR and CCPA, while providing users control over their personal data. Whether you use the react-cookie-consent library or a custom solution, the key is to give users transparency and options when it comes to cookie usage.

To summarize:

• Install a cookie consent management tool like react-cookie-consent.
• Create a banner that informs users and allows them to accept or decline cookies.
• Ensure cookies are only set after user consent.
• Provide a link to a privacy policy that outlines your cookie practices.
• Test your app to ensure functionality across browsers and devices.