{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install next-client-cookies"],"cli":null},"imports":["import { CookiesProvider } from 'next-client-cookies/server';","import { useCookies } from 'next-client-cookies';","import { getCookies } from 'next-client-cookies/server';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"'use client';\n\nimport { useCookies } from 'next-client-cookies';\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <CookiesProvider>{children}</CookiesProvider>\n      </body>\n    </html>\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    <div>\n      <p>My cookie value: {cookies.get('my-cookie') ?? 'Not set'}</p>\n\n      <button onClick={() => cookies.set('my-cookie', 'my-value', { expires: 7 })}> \n        Set 'my-cookie'\n      </button>\n      {' | '}\n      <button onClick={() => cookies.remove('my-cookie')}>Delete 'my-cookie'</button>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}