{"id":13761857,"url":"https://github.com/andreizanik/cookies-next","last_synced_at":"2025-05-14T00:10:55.340Z","repository":{"id":38359830,"uuid":"193219356","full_name":"andreizanik/cookies-next","owner":"andreizanik","description":"Getting, setting and removing cookies on both client and server with next.js","archived":false,"fork":false,"pushed_at":"2025-01-15T09:03:33.000Z","size":109,"stargazers_count":694,"open_issues_count":21,"forks_count":49,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T16:59:20.014Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreizanik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-22T10:07:17.000Z","updated_at":"2025-04-09T11:53:16.000Z","dependencies_parsed_at":"2024-05-02T21:31:34.231Z","dependency_job_id":"11fb7df1-b54a-4ab9-a9ba-67c4aca251b5","html_url":"https://github.com/andreizanik/cookies-next","commit_stats":{"total_commits":58,"total_committers":11,"mean_commits":"5.2727272727272725","dds":0.4137931034482759,"last_synced_commit":"d87cd88b8820a3421b34eb21965ccd6cb4fcbebd"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Fcookies-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Fcookies-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Fcookies-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Fcookies-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreizanik","download_url":"https://codeload.github.com/andreizanik/cookies-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254044372,"owners_count":22005148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T14:00:30.565Z","updated_at":"2025-05-14T00:10:50.332Z","avatar_url":"https://github.com/andreizanik.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Nextjs Plugins","Tools"],"sub_categories":[],"readme":"# cookies-next\n\n[![npm version](https://badge.fury.io/js/cookies-next.svg)](https://badge.fury.io/js/cookies-next)\n![GitHub code size in bytes](https://img.shields.io/bundlephobia/min/cookies-next?style=plastic)\n\nA versatile cookie management library for Next.js applications, supporting both client-side and server-side operations.\n\n## Features\n\n- Works on client-side, server-side rendering, and API routes\n- Supports Next.js 13+ App Router and Server Components\n- TypeScript compatible\n- Lightweight and easy to use\n\n## Installation\n\nFor Next.js versions 15 and above, use the latest version of cookies-next:\n\n```bash\nnpm install --save cookies-next@latest\n```\n\nFor Next.js versions 12.2.0 to 14.x, use cookies-next version 4.3.0:\n\n```bash\nnpm install --save cookies-next@4.3.0\n```\n\n## Usage\n\n### Importing\n\nFor Next.js 15+:\n\n```javascript\n// For client-side usage\nimport {\n  getCookie,\n  getCookies,\n  setCookie,\n  deleteCookie,\n  hasCookie,\n  useGetCookies,\n  useSetCookie,\n  useHasCookie,\n  useDeleteCookie,\n  useGetCookie,\n} from 'cookies-next/client';\n\n// For server-side usage\nimport { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next/server';\n```\n\nAlso, you can leave the decision of which import to use to the the library itself, by importing from the root:\n\n```javascript\nimport { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';\n```\n\nFor Next.js 12.2.0 to 13.x:\n\n```javascript\nimport { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';\n```\n\n### Basic Operations\n\n#### Set a cookie\n\n```javascript\nsetCookie('key', 'value', options);\n```\n\n#### Get a cookie\n\n```javascript\nconst value = getCookie('key', options);\n```\n\n#### Get all cookies\n\n```javascript\nconst cookies = getCookies(options);\n```\n\n#### Check if a cookie exists\n\n```javascript\nconst exists = hasCookie('key', options);\n```\n\n#### Delete a cookie\n\n```javascript\ndeleteCookie('key', options);\n```\n\n### Client-side Usage\n\n#### Hooks\n\nUsing separate hook for each cookie function:\n\n```javascript\n'use client';\n\nimport { useGetCookies, useSetCookie, useHasCookie, useDeleteCookie, useGetCookie } from 'cookies-next';\n\nfunction ClientComponent() {\n  const setCookie = useSetCookie();\n  const hasCookie = useHasCookie();\n  const deleteCookie = useDeleteCookie();\n  const getCookies = useGetCookies();\n  const getCookie = useGetCookie();\n\n  setCookie('key', 'value');\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003ehasCookie - {JSON.stringify(hasCookie('key'))}\u003c/p\u003e\n      \u003cp\u003egetCookies - {JSON.stringify(getCookies)}\u003c/p\u003e\n      \u003cp\u003egetCookie - {getCookie('key')}\u003c/p\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e deleteCookie('key')}\u003e\n        deleteCookie\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nUsing one hook that returns all of the cookie functions:\n\n```javascript\n'use client';\n\nimport { useCookiesNext } from 'cookies-next';\n\nfunction ClientComponent() {\n  const { setCookie, hasCookie, deleteCookie, getCookies, getCookie } = useCookiesNext();\n\n  setCookie('key', 'value');\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003ehasCookie - {JSON.stringify(hasCookie('key'))}\u003c/p\u003e\n      \u003cp\u003egetCookies - {JSON.stringify(getCookies)}\u003c/p\u003e\n      \u003cp\u003egetCookie - {getCookie('key')}\u003c/p\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e deleteCookie('key')}\u003e\n        deleteCookie\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nIf 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.\n\n```javascript\nconst getCookies = useGetCookies();\n\nuseEffect(() =\u003e {\n  console.log('getCookies', getCookies());\n}, [getCookies]);\n```\n\n#### Client functions\n\n```javascript\n'use client';\n\nimport { getCookies, setCookie, deleteCookie, getCookie } from 'cookies-next/client';\n\nfunction ClientComponent() {\n  /* \n ❗❗❗ In a client component, it's highly recommended to use cookies-next functions within useEffect or in event handlers; otherwise, you might encounter hydration mismatch errors. - \n https://react.dev/link/hydration-mismatch.   \n */\n\n  useEffect(() =\u003e {\n    getCookies();\n    getCookie('key');\n    setCookie('key', 'value');\n    deleteCookie('key');\n    hasCookie('key');\n  }, []);\n\n  const handleClick = () =\u003e {\n    getCookies();\n    getCookie('key');\n    setCookie('key', 'value');\n    deleteCookie('key');\n    hasCookie('key');\n  };\n\n  /* .... */\n}\n```\n\n### Server-side Usage (App Router)\n\nIn Server Components:\n\n```javascript\nimport { getCookie, getCookies, hasCookie } from 'cookies-next/server';\nimport { cookies } from 'next/headers';\n\nexport const ServerComponent = async () =\u003e {\n  // Read-only operations in Server Components\n  const value = await getCookie('test', { cookies });\n  const allCookies = await getCookies({ cookies });\n  const exists = await hasCookie('test', { cookies });\n\n  // Note: It's not possible to update cookies in Server Components\n  ❌ await setCookie(\"test\", \"value\", { cookies }); // Won't work\n  ❌ await deleteCookie('test', { cookies }); // Won't work\n\n  return \u003cdiv\u003e...\u003c/div\u003e;\n};\n```\n\nIn Server Actions:\n\n```javascript\n'use server';\n\nimport { cookies } from 'next/headers';\nimport { setCookie, deleteCookie, getCookie, getCookies, hasCookie } from 'cookies-next/server';\n\nexport async function serverAction() {\n  await setCookie('test', 'value', { cookies });\n  await deleteCookie('test', { cookies });\n  await getCookie('test', { cookies });\n  await getCookies({ cookies });\n  await hasCookie('test', { cookies });\n}\n```\n\n### API Routes (App Router)\n\n```javascript\nimport { cookies } from 'next/headers';\nimport { NextRequest, NextResponse } from 'next/server';\nimport { deleteCookie, getCookie, setCookie, hasCookie, getCookies } from 'cookies-next/server';\n\nexport async function GET(req: NextRequest) {\n  const res = new NextResponse();\n  await setCookie('test', 'value', { res, req });\n  await getCookie('test', { res, req });\n  await getCookies({ res, req });\n  await deleteCookie('test', { res, req });\n  await hasCookie('test', { req, res });\n\n  // Using cookies function\n  await setCookie('test1', 'value', { cookies });\n  await getCookie('test1', { cookies });\n  await getCookies({ cookies });\n  await deleteCookie('test1', { cookies });\n  await hasCookie('test1', { cookies });\n\n  return res;\n}\n```\n\n### Middleware\n\n```javascript\nimport { NextResponse } from 'next/server';\nimport type { NextRequest } from 'next/server';\nimport { getCookie, setCookie, deleteCookie, hasCookie, getCookies } from 'cookies-next/server';\n\nexport async function middleware(req: NextRequest) {\n  const res = NextResponse.next();\n  await setCookie('test', 'value', { res, req });\n  await hasCookie('test', { req, res });\n  await deleteCookie('test', { res, req });\n  await getCookie('test', { res, req });\n  await getCookies({ res, req });\n\n  return res;\n}\n```\n\n## API\n\n### setCookie(key, value, options)\n\nSets a cookie.\n\n```javascript\nsetCookie('key', 'value', options);\n```\n\n### getCookie(key, options)\n\nRetrieves a specific cookie.\n\n```javascript\nconst value = getCookie('key', options);\n```\n\n### getCookies(options)\n\nRetrieves all cookies.\n\n```javascript\nconst cookies = getCookies(options);\n```\n\n### hasCookie(key, options)\n\nChecks if a cookie exists.\n\n```javascript\nconst exists = hasCookie('key', options);\n```\n\n### deleteCookie(key, options)\n\nDeletes a cookie.\n\n```javascript\ndeleteCookie('key', options);\n```\n\n## Options\n\n- `req`: Required for server-side operations (except when using `cookies` function)\n- `res`: Required for server-side operations (except when using `cookies` function)\n- `cookies`: Function from `next/headers`, used in App Router for server-side operations\n- `domain`: Specifies the cookie's domain\n- `path`: Specifies the cookie's path\n- `maxAge`: Specifies the cookie's maximum age in seconds\n- `httpOnly`: Sets the HttpOnly flag\n- `secure`: Sets the Secure flag\n- `sameSite`: Sets the SameSite attribute ('strict', 'lax', or 'none')\n\nFor more detailed options, refer to the [cookie specification](https://tools.ietf.org/html/rfc6265).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreizanik%2Fcookies-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreizanik%2Fcookies-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreizanik%2Fcookies-next/lists"}