{"id":25935324,"url":"https://github.com/andcool-systems/use-next-cookie","last_synced_at":"2025-03-04T01:34:07.119Z","repository":{"id":279930531,"uuid":"940477217","full_name":"Andcool-Systems/use-next-cookie","owner":"Andcool-Systems","description":"A simple hook for using cross-environment cookies in Next.js","archived":false,"fork":false,"pushed_at":"2025-02-28T10:12:38.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T15:33:33.703Z","etag":null,"topics":["cookies","cross-env","nextjs","ssr"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-next-cookie","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Andcool-Systems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-02-28T08:45:17.000Z","updated_at":"2025-02-28T11:37:49.000Z","dependencies_parsed_at":"2025-02-28T15:34:07.871Z","dependency_job_id":"b7ad1c26-ce70-4cd3-b409-4e09d6d92a81","html_url":"https://github.com/Andcool-Systems/use-next-cookie","commit_stats":null,"previous_names":["andcool-systems/use-next-cookie"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andcool-Systems%2Fuse-next-cookie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andcool-Systems%2Fuse-next-cookie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andcool-Systems%2Fuse-next-cookie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Andcool-Systems%2Fuse-next-cookie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Andcool-Systems","download_url":"https://codeload.github.com/Andcool-Systems/use-next-cookie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241768411,"owners_count":20017117,"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":["cookies","cross-env","nextjs","ssr"],"created_at":"2025-03-04T01:34:06.560Z","updated_at":"2025-03-04T01:34:07.109Z","avatar_url":"https://github.com/Andcool-Systems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useNextCookie 🍪\n\nA lightweight and convenient hook for working with cookies in Next.js — a unified API for both server and client environments, where values are initially set based on server-side data.\n\n## ⚡️ Why is this needed?\n\nUsing server-side cookies helps prevent brief flashes of incorrect UI states. For example, without this hook, a user might first see a login form and only then see the authenticated interface after a state update. With `useNextCookie`, the user immediately sees the correct UI corresponding to their authentication status.\n\n## 🚀 Installation\n\n```sh\nnpm i use-next-cookie\n```\n\n## 🔴 Important: Using `CookieProvider`\n\nTo ensure `useNextCookie` works correctly, you need to add `CookieProvider` to the root component (usually `RootLayout`).\n\n```tsx\nimport { CookieProvider } from 'use-next-cookie';\n\nexport default function RootLayout({\n    children\n}: Readonly\u003c{ children: React.ReactNode }\u003e) {\n    return (\n        \u003cCookieProvider\u003e\n            {children}\n        \u003c/CookieProvider\u003e\n    );\n}\n```\n\n\u003e ⚠️ **Important:** Placing `CookieProvider` inside `RootLayout` enables SSR for all pages.\n\n## ❓ How does it work?\n\nThe `useNextCookie` hook allows retrieving server-side cookies on the client without additional requests. On the initial render, cookies are taken from the server and later updated from the client if they change.\n\nExample usage:\n\n```tsx\n'use client';\n\nimport { useNextCookie } from 'use-next-cookie';\nimport { useState, useEffect } from 'react';\n\nexport default function Component() {\n    const session = useNextCookie('session'); // Get actual cookie value\n    const [loggedIn, setLoggedIn] = useState\u003cboolean\u003e(!!session);\n\n    useEffect(() =\u003e {\n        // If cookie changes\n        setLoggedIn(!!session);\n    }, [session]);\n\n    return \u003c\u003e{loggedIn ? \u003cUser /\u003e : \u003cUnauthorized /\u003e}\u003c/\u003e;\n}\n```\n\n## ⏳ Watching cookies\n\nIf you need to track cookie changes in the client environment, pass an interval (in milliseconds) as the second argument to the hook:\n\n```tsx\nconst session = useNextCookie('session', 5000); // Check cookies every 5 seconds\n```\n\nWhen the cookie changes, the hook triggers `useEffect`, causing data updates and a component re-render.\n\n## 🔍 Retrieving server-side cookies without updates\n\nIf you only need **server-side** cookies (without client updates), use `useCookiesServer`:\n\n```tsx\n'use client';\n\nimport { useCookiesServer } from 'use-next-cookie';\n\nexport default function Component() {\n    const cookies = useCookiesServer();\n    const theme = cookies.get('theme');  // Retrieve the `theme` cookie\n\n    return \u003cThemeSelector theme={theme} /\u003e;\n}\n```\n\nIn this case, cookies will not update after hydration and will remain as they were sent by the server.\n\n---\n\nby AndcoolSystems, 27 February 2025\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandcool-systems%2Fuse-next-cookie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandcool-systems%2Fuse-next-cookie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandcool-systems%2Fuse-next-cookie/lists"}