https://github.com/andcool-systems/use-next-cookie
A simple hook for using cross-environment cookies in Next.js
https://github.com/andcool-systems/use-next-cookie
cookies cross-env nextjs ssr
Last synced: over 1 year ago
JSON representation
A simple hook for using cross-environment cookies in Next.js
- Host: GitHub
- URL: https://github.com/andcool-systems/use-next-cookie
- Owner: Andcool-Systems
- Created: 2025-02-28T08:45:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-28T10:12:38.000Z (over 1 year ago)
- Last Synced: 2025-02-28T15:33:33.703Z (over 1 year ago)
- Topics: cookies, cross-env, nextjs, ssr
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-next-cookie
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useNextCookie 🍪
A 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.
## ⚡️ Why is this needed?
Using 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.
## 🚀 Installation
```sh
npm i use-next-cookie
```
## 🔴 Important: Using `CookieProvider`
To ensure `useNextCookie` works correctly, you need to add `CookieProvider` to the root component (usually `RootLayout`).
```tsx
import { CookieProvider } from 'use-next-cookie';
export default function RootLayout({
children
}: Readonly<{ children: React.ReactNode }>) {
return (
{children}
);
}
```
> ⚠️ **Important:** Placing `CookieProvider` inside `RootLayout` enables SSR for all pages.
## ❓ How does it work?
The `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.
Example usage:
```tsx
'use client';
import { useNextCookie } from 'use-next-cookie';
import { useState, useEffect } from 'react';
export default function Component() {
const session = useNextCookie('session'); // Get actual cookie value
const [loggedIn, setLoggedIn] = useState(!!session);
useEffect(() => {
// If cookie changes
setLoggedIn(!!session);
}, [session]);
return <>{loggedIn ? : }>;
}
```
## ⏳ Watching cookies
If you need to track cookie changes in the client environment, pass an interval (in milliseconds) as the second argument to the hook:
```tsx
const session = useNextCookie('session', 5000); // Check cookies every 5 seconds
```
When the cookie changes, the hook triggers `useEffect`, causing data updates and a component re-render.
## 🔍 Retrieving server-side cookies without updates
If you only need **server-side** cookies (without client updates), use `useCookiesServer`:
```tsx
'use client';
import { useCookiesServer } from 'use-next-cookie';
export default function Component() {
const cookies = useCookiesServer();
const theme = cookies.get('theme'); // Retrieve the `theme` cookie
return ;
}
```
In this case, cookies will not update after hydration and will remain as they were sent by the server.
---
by AndcoolSystems, 27 February 2025