Client-side cookie operations that work in browser environments using the native document.cookie API. These functions are optimized for client-side execution and will throw errors if called on the server-side.
Beyond the core cookie functions, the client export also provides access to React context components and utilities:
// React Context (for advanced usage)
export const CookieContext: React.Context<CookieContextType | null>;
export function CookieProvider(props: CookieProviderProps): JSX.Element;
// Utility Functions
export function stringify(value: any): string;
export function decode(str: string): string;
export function isClientSide(options?: OptionsType): boolean;
export function getRenderPhase(): 'client' | 'server';Note: CookiesNextProvider is an alias for CookieProvider - both refer to the same component.
Retrieves all cookies as a key-value object from the browser's cookie store.
/**
* Get all cookies from document.cookie
* @param options - Context options (must indicate client-side)
* @returns Object containing all cookies or undefined during SSR
*/
function getCookies(options?: OptionsType): TmpCookiesObj | undefined;Usage Examples:
import { getCookies } from 'cookies-next/client';
// Get all cookies
const allCookies = getCookies();
console.log(allCookies); // { 'session-id': 'abc123', 'theme': 'dark' }
// During server-side rendering, returns undefined
if (typeof window !== 'undefined') {
const cookies = getCookies();
}Retrieves a specific cookie value by key, with automatic URI decoding.
/**
* Get a specific cookie value by key
* @param key - Cookie name to retrieve
* @param options - Context options (must indicate client-side)
* @returns Cookie value or undefined if not found
*/
function getCookie(key: string, options?: OptionsType): CookieValueTypes;Usage Examples:
import { getCookie } from 'cookies-next/client';
// Get a specific cookie
const userId = getCookie('user-id');
if (userId) {
console.log('User ID:', userId);
}
// Handle missing cookies
const theme = getCookie('theme') || 'light';
// Get structured data (automatically JSON parsed if valid)
const preferences = getCookie('user-preferences');
// If cookie contains '{"lang":"en","notifications":true}'
// preferences will be the parsed objectSets a cookie with the specified key, value, and options using document.cookie.
/**
* Set a cookie in the browser
* @param key - Cookie name
* @param data - Cookie value (automatically stringified if object)
* @param options - Cookie options including path, expires, etc.
*/
function setCookie(key: string, data: any, options?: OptionsType): void;Usage Examples:
import { setCookie } from 'cookies-next/client';
// Set a simple cookie
setCookie('username', 'alice');
// Set cookie with options
setCookie('session-token', 'abc123', {
maxAge: 24 * 60 * 60, // 1 day in seconds
path: '/',
secure: true,
sameSite: 'strict'
});
// Set structured data (automatically JSON stringified)
setCookie('user-preferences', {
theme: 'dark',
language: 'en',
notifications: true
}, {
maxAge: 30 * 24 * 60 * 60, // 30 days
path: '/'
});
// Set cookie with expiration date
setCookie('temp-data', 'value', {
expires: new Date(Date.now() + 60 * 60 * 1000) // 1 hour from now
});Removes a cookie by setting it to an empty string with maxAge: -1.
/**
* Delete a cookie from the browser
* @param key - Cookie name to delete
* @param options - Cookie options (should match original path/domain)
*/
function deleteCookie(key: string, options?: OptionsType): void;Usage Examples:
import { deleteCookie } from 'cookies-next/client';
// Delete a cookie
deleteCookie('session-token');
// Delete cookie with specific path (must match original path)
deleteCookie('user-data', { path: '/dashboard' });
// Delete cookie with specific domain
deleteCookie('tracking-id', {
domain: '.example.com',
path: '/'
});Checks if a cookie exists in the browser's cookie store.
/**
* Check if a cookie exists
* @param key - Cookie name to check
* @param options - Context options (must indicate client-side)
* @returns True if cookie exists, false otherwise
*/
function hasCookie(key: string, options?: OptionsType): boolean;Usage Examples:
import { hasCookie } from 'cookies-next/client';
// Check if cookie exists
if (hasCookie('auth-token')) {
console.log('User is authenticated');
} else {
console.log('User needs to log in');
}
// Conditional logic based on cookie existence
const showWelcome = !hasCookie('first-visit');
if (showWelcome) {
setCookie('first-visit', 'true', { maxAge: 365 * 24 * 60 * 60 });
}Internal utility for detecting changes in the browser's cookie store used by reactive hooks.
/**
* Detect changes in cookies and trigger callback
* @param onChange - Callback function called when cookies change
* @param previousCookies - Previous cookie state for comparison
*/
function revalidateCookies(
onChange: (newCookies: TmpCookiesObj | undefined) => void,
previousCookies: TmpCookiesObj | undefined
): void;Client-side functions include built-in validation:
// Throws error if called on server-side
try {
setCookie('key', 'value');
} catch (error) {
// Error: "You are trying to access cookies on the server side.
// Please, use the server-side import with `cookies-next/server` instead."
}Client-side functions handle SSR gracefully:
getCookies() returns undefined during server-side renderingimport { getCookies } from 'cookies-next/client';
// Safe SSR usage
const cookies = getCookies();
if (cookies) {
// Only runs on client-side
console.log('Client-side cookies:', cookies);
}