{"id":16453,"library":"next-client-cookies","title":"Next.js App Router Cookie Management","description":"This library provides comprehensive cookie management for Next.js 13+ applications, specifically designed for the App Router. It offers solutions for both client-side components (SSR-capable) and server-only components. The current stable version is 2.1.1. While a specific release cadence isn't stated, the package appears actively maintained, indicated by recent updates and explicit migration instructions from v1. Key differentiators include its ability to support client components rendered on the server (SSR) with a special dehydration mechanism for cookie updates, a capability not natively offered by Next.js for server components. Its client-side interface is based on the popular `js-cookie` package, providing a familiar API. It addresses the challenge of handling cookies consistently across the varied rendering environments of Next.js's App Directory.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/moshest/next-client-cookies","tags":["javascript","next","next.js","nextjs","cookies","cookie","js-cookie","use","client","typescript"],"install":[{"cmd":"npm install next-client-cookies","lang":"bash","label":"npm"},{"cmd":"yarn add next-client-cookies","lang":"bash","label":"yarn"},{"cmd":"pnpm add next-client-cookies","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Next.js application context and its App Router features.","package":"next","optional":false},{"reason":"Required for React component usage and hooks within Next.js applications.","package":"react","optional":false}],"imports":[{"note":"This provider enables cookie functionality across your application and should be imported from the `/server` entry point.","wrong":"import { CookiesProvider } from 'next-client-cookies';","symbol":"CookiesProvider","correct":"import { CookiesProvider } from 'next-client-cookies/server';"},{"note":"This hook is designed for client components (`'use client'`) and enables read/write access to cookies on both client and server (via SSR).","wrong":"const { useCookies } = require('next-client-cookies');","symbol":"useCookies","correct":"import { useCookies } from 'next-client-cookies';"},{"note":"This function is for server-only components and must be `await`ed as it returns a Promise. Import from the `/server` entry point.","wrong":"const getCookies = require('next-client-cookies/server').getCookies;","symbol":"getCookies","correct":"import { getCookies } from 'next-client-cookies/server';"}],"quickstart":{"code":"'use client';\n\nimport { useCookies } from 'next-client-cookies';\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n );\n}\n\n// In a client component (e.g., app/my-component.tsx)\n// Make sure your component file starts with 'use client';\nconst MyCookieComponent = () => {\n const cookies = useCookies();\n\n return (\n
\n
My cookie value: {cookies.get('my-cookie') ?? 'Not set'}
\n\n \n {' | '}\n \n
\n );\n};","lang":"typescript","description":"Demonstrates setting up CookiesProvider in `app/layout.tsx` and using the `useCookies` hook in a client component to read, set, and delete cookies."},"warnings":[{"fix":"Apply `CookiesProvider` on a per-page or per-layout basis where cookie functionality is strictly required, instead of the root `app/layout.tsx`.","message":"Placing `CookiesProvider` in `app/layout.tsx` will cause the entire application to opt out of static generation. Consider using it only on specific pages or nested layouts that require dynamic cookie access to maintain static generation for other parts of your app.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For cookie updates in server-only components, utilize Next.js Server Actions or Route Handlers. If client-side interaction and SSR updates are needed, ensure the component is a Client Component (`'use client'`).","message":"Next.js Server Components inherently do not support directly updating cookies outside of Actions or Route Handlers. While `next-client-cookies` offers a dehydration mechanism for client components rendered via SSR to update cookies, server-only components remain restricted to Next.js's native methods for server-side cookie modification.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Update calls from `const cookies = getCookies();` to `const cookies = await getCookies();` in your server components.","message":"When migrating from v1, the `getCookies` function is now asynchronous and must be `await`ed.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Change `const cookies = getCookies();` to `const cookies = await getCookies();`.","cause":"The `getCookies()` function in a Server Component was called without `await`, causing `cookies` to be a Promise object instead of the resolved cookie interface.","error":"TypeError: cookies.get is not a function"},{"fix":"Add `'use client';` at the very top of the file where `useCookies` is called, or refactor the cookie logic into a designated Client Component.","cause":"Attempting to call the `useCookies` hook inside a Server Component (a file without the `'use client'` directive at the top).","error":"Error: useCookies() must be used within a Client Component."},{"fix":"Ensure `import { CookiesProvider } from 'next-client-cookies/server';` is present in the file where `CookiesProvider` is used, typically `app/layout.tsx`.","cause":"The `CookiesProvider` component was used without being correctly imported or with an incorrect import path.","error":"ReferenceError: CookiesProvider is not defined"}],"ecosystem":"npm"}