Getting, setting and removing cookies on both client and server with next.js
Getting, setting and removing cookies on both client and server with next.js
A versatile cookie management library for Next.js applications, supporting both client-side and server-side operations.
For Next.js versions 15 and above, use the latest version of cookies-next:
npm install --save cookies-next@latestFor Next.js versions 12.2.0 to 14.x, use cookies-next version 4.3.0:
npm install --save [email protected]For Next.js 15+:
// For client-side usage
import {
getCookie,
getCookies,
setCookie,
deleteCookie,
hasCookie,
useGetCookies,
useSetCookie,
useHasCookie,
useDeleteCookie,
useGetCookie,
} from 'cookies-next/client';
// For server-side usage
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next/server';Also, you can leave the decision of which import to use to the the library itself, by importing from the root:
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';For Next.js 12.2.0 to 13.x:
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';setCookie('key', 'value', options);const value = getCookie('key', options);const cookies = getCookies(options);const exists = hasCookie('key', options);deleteCookie('key', options);Using separate hook for each cookie function:
'use client';
import { useGetCookies, useSetCookie, useHasCookie, useDeleteCookie, useGetCookie } from 'cookies-next';
function ClientComponent() {
const setCookie = useSetCookie();
const hasCookie = useHasCookie();
const deleteCookie = useDeleteCookie();
const getCookies = useGetCookies();
const getCookie = useGetCookie();
setCookie('key', 'value');
return (
);
}Using one hook that returns all of the cookie functions:
'use client';
import { useCookiesNext } from 'cookies-next';
function ClientComponent() {
const { setCookie, hasCookie, deleteCookie, getCookies, getCookie } = useCookiesNext();
setCookie('key', 'value');
return (
);
}If you are going to perform actions on cookies inside a useEffect, make sure to add the cookie function returned from the hook to the dependency array.
const getCookies = useGetCookies();
useEffect(() => {
console.log('getCookies', getCookies());
}, [getCookies]);In cookies-next, standard hooks are static as they primarily address issues related to hydration in client components (since they are stateless). In contrast, reactive hooks maintain their own React state and require adding the CookiesNextProvider to your component tree.
Adding a provider:
"use client";
import { ReactElement, ReactNode } from "react";
import { CookiesNextProvider } from "cookies-next";
interface ProvidersProps {
children: ReactNode;
}
export function Providers({ children }: ProvidersProps) {
return {children};
}The purpose of polling is to monitor document.cookie and reflect changes made without a cookies-next action, such as when client-side cookies are set by the server. By default, polling is disabled.
Using hooks:
'use client';
import {
useReactiveGetCookie,
useReactiveGetCookies,
useReactiveHasCookie,
useReactiveSetCookie,
useReactiveDeleteCookie,
} from 'cookies-next';
const hasCookie = useReactiveHasCookie();
const getCookies = useReactiveGetCookies();
const getCookie = useReactiveGetCookie();
const setCookie = useReactiveSetCookie();
const deleteCookie = useReactiveDeleteCookie();
/* --- */or:
'use client';
import { useReactiveCookiesNext } from 'cookies-next';
const { hasCookie, getCookies, getCookie, setCookie, deleteCookie } = useReactiveCookiesNext();
/* --- */When the cookie state changes, all cookies within the components wrapped with CookiesNextProvider will be updated in the cookie functions provided by reactive hooks.
Sometimes, you may need to manually revalidate cookies. For example, after fetching data when the server sets new cookies on the client. In such cases, you can use the revalidateCookiesState method returned from useReactiveCookiesNext, or the dedicated hook: useRevalidateCookieStore.
Note: This feature only works when using CookiesNextProvider and the reactive hooks.
Usage:
import { useReactiveCookiesNext, useRevalidateCookiesState } from 'cookies-next';
function ClientComponent() {
const { revalidateCookiesState } = useReactiveCookiesNext();
// OR
const revalidateCookiesState = useRevalidateCookiesState();
useEffect(() => {
fetchData({ onSuccess: revalidateCookiesState });
console.log('fetched data');
}, []);
/* .... */
}…In Server Components:
import { getCookie, getCookies, hasCookie } from 'cookies-next/server';
import { cookies } from 'next/headers';
export const ServerComponent = async () => {
// Read-only operations in Server Components
const value = await getCookie('test', { cookies });
const allCookies = await getCookies({ cookies });
const exists = await hasCookie('test', { cookies });
// Note: It's not possible to update cookies in Server Components
❌ await setCookie("test", "value", { cookies }); // Won't work
❌ await deleteCookie('test', { cookies }); // Won't work
return
;
};In Server Actions:
'use server';
import { cookies } from 'next/headers';
import { setCookie, deleteCookie, getCookie, getCookies, hasCookie } from 'cookies-next/server';
export async function serverAction() {
await setCookie('test', 'value', { cookies });
await deleteCookie('test', { cookies });
await getCookie('test', { cookies });
await getCookies({ cookies });
await hasCookie('test', { cookies });
}…import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { getCookie, setCookie, deleteCookie, hasCookie, getCookies } from 'cookies-next/server';
export async function middleware(req: NextRequest) {
const res = NextResponse.next();
await setCookie('test', 'value', { res, req });
await hasCookie('test', { req, res });
await deleteCookie('test', { res, req });
await getCookie('test', { res, req });
await getCookies({ res, req });
return res;
}Sets a cookie.
setCookie('key', 'value', options);Retrieves a specific cookie.
const value = getCookie('key', options);Retrieves all cookies.
const cookies = getCookies(options);Checks if a cookie exists.
const exists = hasCookie('key', options);Deletes a cookie.
deleteCookie('key', options);req: Required for server-side operations (except when using cookies function)res: Required for server-side operations (except when using cookies function)cookies: Function from next/headers, used in App Router for server-side operationsdomain: Specifies the cookie's domainpath: Specifies the cookie's pathmaxAge: Specifies the cookie's maximum age in secondshttpOnly: Sets the HttpOnly flagsecure: Sets the Secure flagsameSite: Sets the SameSite attribute ('strict', 'lax', or 'none')For more detailed options, refer to the cookie specification.
Every project is better with a little help from friends.
Thanks to AI Alt Text Generator - AltTextLab for supporting our work and contributing to a more accessible web.
MIT
No open issues yet, or sync has not completed.