Cookie consent in NextJs

This article discusses how to add cookie consent to a NextJs app using cookies-next package.

Install the required packages:

To install the package, type one of the following commands based on your package manager

For npm:

npm install cookies-next

For yarn:

yarn add cookies-next

Cookie consent implementation:

When there is no cookie present, the cookie consent popup should be shown.

cookies-next package has hasCookie, setCookie functions with which the cookies can be accessed and managed. Here is how its managed in a React component.

const [showConsent, setShowConsent] = React.useState(true);

React.useEffect(() => {

setShowConsent(hasCookie(“localConsent”));

}, []);

const acceptCookie = () => {

setShowConsent(true);

setCookie(“localConsent”, “true”, {});

};

Here is a full example of how a cookie consent component works in Next.js. Add the component to your pages/index.js to be visible.

import React from “react”;
import { hasCookie, setCookie } from “cookies-next”;

const CookieConsent = (props) => {
const [showConsent, setShowConsent] = React.useState(true);

React.useEffect(() => {
setShowConsent(hasCookie(“localConsent”));
}, []);

const acceptCookie = () => {
setShowConsent(true);
setCookie(“localConsent”, “true”, {});
};

if (showConsent) {
return null;
}

return (
<div className=”fixed inset-0 bg-slate-700 bg-opacity-70″>
<div className=”fixed bottom-0 left-0 right-0 flex items-center justify-between px-4 py-8 bg-gray-100″>
<span className=”text-dark text-base mr-16″>
This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy.
</span>
<button className=”bg-green-500 py-2 px-8 rounded text-white” onClick={() => acceptCookie()}>
Accept
</button>
</div>
</div>
);
};

export default CookieConsent;

Note: The above example uses tailwindcss. To know more, refer here

Be Amazed!

Hooray! We have successfully added cookie consent in Next.js.