cookies-next

cookies-next is a cookie management library purpose-built for Next.js applications, providing a single set of functions — getCookie, setCookie, deleteCookie, hasCookie, getCookies — that work identically whether called from a client component, a React Server Component, a Server Action, an API route, or middleware. Instead of juggling document.cookie parsing on the client and the cookies()/NextRequest/NextResponse APIs on the server, developers import from cookies-next/client or cookies-next/server (or let the package auto-detect the environment) and get a consistent, typed interface plus optional React hooks for reactive cookie state.

What You Get

• Core functions getCookie, getCookies, setCookie, deleteCookie, and hasCookie usable in both client and server contexts
• Separate cookies-next/client and cookies-next/server entry points for explicit, tree-shakeable imports alongside a root import that auto-resolves the environment
• Static hooks (useGetCookie, useSetCookie, useCookiesNext, etc.) for client components, designed to avoid hydration mismatches
• Reactive hooks (useReactiveGetCookie, useReactiveCookiesNext, useRevalidateCookiesState) backed by a CookiesNextProvider that keeps React state in sync with document.cookie, with optional polling
• Full TypeScript typings and explicit option objects (req/res for the Pages Router or Route Handlers, cookies for the App Router) so the same call shape works with next/headers or the Next.js request/response objects

Common Use Cases

• Reading and writing auth/session tokens from Server Actions and Route Handlers without hand-coding next/headers cookie parsing
• Sharing cookie-derived UI state (locale, theme, consent banners) between Server Components and client components using the same function names
• Setting or clearing cookies from Next.js Middleware for A/B testing, feature flags, or redirect logic
• Building client components that need live-updating cookie values (e.g. after a server sets a cookie mid-session) via the reactive hooks and CookiesNextProvider

Under The Hood

Architecture The package splits into src/client (cookie-functions.ts, hooks.ts, reactive-hooks, context.tsx for CookiesNextProvider) and src/server (server.ts wrapping next/headers and NextRequest/NextResponse), with src/common holding shared utils.ts/types.ts, and a root index.ts that re-exports both, letting the same public function names resolve to environment-specific implementations depending on which entry point is imported.

Tech Stack Written in TypeScript, compiled with tsc to a lib/ directory with separate type declaration paths for the client and server subpaths, tested with Jest (client.test.ts, server.test.ts, hooks.test.ts, reactive-hooks.test.tsx), and formatted with Prettier; its only real dependency is Next.js itself as an implicit peer via next/headers and next/server types.

Code Quality Client, server, and hook behavior each have dedicated Jest test files, exported types (client/types.ts, common/types.ts) are separated from implementation, and function names are consistent between the static and reactive hook variants (getCookie/useGetCookie/useReactiveGetCookie), though the last release (v6.1.1) predates a stretch of low commit activity per the repo health data.

API Design The five core functions (getCookie, getCookies, setCookie, deleteCookie, hasCookie) share one signature shape across client and server, options (req/res or cookies) map directly onto the Next.js APIs a developer already knows, and the README documents every Next.js context (Server Component, Server Action, Route Handler, Middleware) with a runnable snippet, keeping the learning curve low for anyone already familiar with Next.js’s own cookie APIs.