GDPR Cookie Consent Bar

Adding a GDPR cookie consent driven by a cookie that stores the confirmation and hide the bar in future sessions.

Required dependencies

We use react-cookie-consent for the confirmation bar:

# npm i react-cookie-consent --save

We encapsulate the consent bar in a component src/components/cookie-consent.tsx:

"use client";
 
import ReactCookieConsent from "react-cookie-consent";
 
export function CookieConsent() {
  return (
    <ReactCookieConsent
      style={{ background: "#404040" }}
      buttonStyle={{ borderRadius: 8 }}
    >
      <div>
        This website uses cookies to enhance the user experience. Review the{" "}
        <a
          className="font-medium text-primary underline underline-offset-4"
          href="/about/"
        >
          privacy policy
        </a>{" "}
        for details.
      </div>
    </ReactCookieConsent>
  );
}

In this case the link goes to the about page. In a real world scenario you would forward that link to some kind of privacy policy page.

The cookie consent component is included in the layout:

...
import { SiteHeader } from "@/components/site-header";
import { CookieConsent } from "@/components/cookie-consent";
import { Providers } from "@/components/providers";
...
 
export default function RootLayout( ... ) {
...
            <SiteHeader />
            <main className="flex-1">{children}</main>
            <ScrollToTop />
            <CookieConsent />
...
}

Last Updated: