A cookie consent banner informs users about the use of cookies on your website and requests their consent to collect and process their data.
To allow users to choose their preferences, such as:
js-cookie.cookieConsent) with a value of true.localStorage:
**localStorage**? It’s accessible only on the client-side, making it less versatile for SSR.js-cookie.Cookies are like sticky notes that both you (the browser) and the website's server can read. They are small pieces of information sent with every request to the server.
In Next.js apps:
For example:
| Feature | Local Storage | Cookies |
|---|---|---|
| Where it's stored | Only in your browser | In both browser and server |
| Accessible by Server | No | Yes |
| Expiration | No expiration unless cleared | Can set expiration (e.g., 30 days) |
| Size Limit | Up to ~5MB | Smaller (~4KB per cookie) |
| Best for | Storing app settings locally | Handling user sessions, preferences, SSR |
**js-cookie**Install a library to manage cookies easily:
npm install js-cookie
Here’s the code for a minimal cookie consent banner:
'use client';
import { useState, useEffect } from 'react';
import Cookies from 'js-cookie';
const CookieConsentBanner = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
const consent = Cookies.get('cookieConsent');
if (!consent) {
setShowBanner(true);
}
}, []);
const handleAcceptCookies = () => {
Cookies.set('cookieConsent', 'true', { expires: 30 }); // Set cookie for 30 days
setShowBanner(false);
};
if (!showBanner) return null;
return (
<div style={bannerStyles}>
<p>We use cookies to improve your experience. By using this site, you agree to our use of cookies.</p>
<button onClick={handleAcceptCookies}>Accept</button>
</div>
);
};
const bannerStyles = {
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
background: '#f8f8f8',
padding: '15px',
borderTop: '1px solid #ccc',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
};
export default CookieConsentBanner
Include the CookieConsentBanner in your global layout so it appears across the website:
import CookieConsentBanner from './components/CookieConsentBanner';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<CookieConsentBanner />
</body>
</html>
);
}
After the user accepts cookies:
The cookieConsent cookie will be created.
The cookie will expire after 30 days.
You can validate this by:
cookieConsent cookie exists.cookieConsent cookie is created with a 30-day TTL.cookieConsent cookie is present, the banner does not show.Think of local storage like a notepad on your computer that only you can see and access. It’s used by your browser (like Chrome) to store data locally on your device.
Here’s an example of using local storage in JavaScript:
javascript
Copy code
// Save something in local storage
localStorage.setItem('userConsent', 'true');
// Retrieve it later
const userConsent = localStorage.getItem('userConsent');
console.log(userConsent); // Output: 'true'
// Remove it
localStorage.removeItem('userConsent');
In Next.js, SSR (server-side rendering) means some of the code runs on a server before it sends the page to your browser.
Since local storage is only in the browser, when Next.js runs on the server, it can’t access local storage.
Imagine this:
Cookies are like sticky notes that both you (the browser) and the website's server can read. They are small pieces of information sent with every request to the server.
Here’s a simple example of setting, getting, and deleting cookies using JavaScript:
javascript
Copy code
// Set a cookie that expires in 30 days
document.cookie = "userConsent=true; max-age=2592000"; // 30 days in seconds
// Get all cookies
console.log(document.cookie); // Output: 'userConsent=true'
// Delete a cookie (set max-age to 0)
document.cookie = "userConsent=; max-age=0";
Because cookies are sent with every request to the server:
Example: