342 lines
7.8 KiB
Markdown
342 lines
7.8 KiB
Markdown
# cookies-next
|
|
|
|
[](https://badge.fury.io/js/cookies-next)
|
|

|
|
|
|
A versatile cookie management library for Next.js applications, supporting both client-side and server-side operations.
|
|
|
|
## Features
|
|
|
|
- Works on client-side, server-side rendering, and API routes
|
|
- Supports Next.js 13+ App Router and Server Components
|
|
- TypeScript compatible
|
|
- Lightweight and easy to use
|
|
|
|
## Installation
|
|
|
|
For Next.js versions 15 and above, use the latest version of cookies-next:
|
|
|
|
```bash
|
|
npm install --save cookies-next@latest
|
|
```
|
|
|
|
For Next.js versions 12.2.0 to 14.x, use cookies-next version 4.3.0:
|
|
|
|
```bash
|
|
npm install --save cookies-next@4.3.0
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Importing
|
|
|
|
For Next.js 15+:
|
|
|
|
```javascript
|
|
// For client-side usage
|
|
import {
|
|
getCookie,
|
|
getCookies,
|
|
setCookie,
|
|
deleteCookie,
|
|
hasCookie,
|
|
useGetCookies,
|
|
useSetCookie,
|
|
useHasCookie,
|
|
useDeleteCookie,
|
|
useGetCookie,
|
|
} from 'cookies-next/client';
|
|
|
|
// For server-side usage
|
|
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next/server';
|
|
```
|
|
|
|
Also, you can leave the decision of which import to use to the the library itself, by importing from the root:
|
|
|
|
```javascript
|
|
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';
|
|
```
|
|
|
|
For Next.js 12.2.0 to 13.x:
|
|
|
|
```javascript
|
|
import { getCookie, getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';
|
|
```
|
|
|
|
### Basic Operations
|
|
|
|
#### Set a cookie
|
|
|
|
```javascript
|
|
setCookie('key', 'value', options);
|
|
```
|
|
|
|
#### Get a cookie
|
|
|
|
```javascript
|
|
const value = getCookie('key', options);
|
|
```
|
|
|
|
#### Get all cookies
|
|
|
|
```javascript
|
|
const cookies = getCookies(options);
|
|
```
|
|
|
|
#### Check if a cookie exists
|
|
|
|
```javascript
|
|
const exists = hasCookie('key', options);
|
|
```
|
|
|
|
#### Delete a cookie
|
|
|
|
```javascript
|
|
deleteCookie('key', options);
|
|
```
|
|
|
|
### Client-side Usage
|
|
|
|
#### Hooks
|
|
|
|
Using separate hook for each cookie function:
|
|
|
|
```javascript
|
|
'use client';
|
|
|
|
import { useGetCookies, useSetCookie, useHasCookie, useDeleteCookie, useGetCookie } from 'cookies-next';
|
|
|
|
function ClientComponent() {
|
|
const setCookie = useSetCookie();
|
|
const hasCookie = useHasCookie();
|
|
const deleteCookie = useDeleteCookie();
|
|
const getCookies = useGetCookies();
|
|
const getCookie = useGetCookie();
|
|
|
|
setCookie('key', 'value');
|
|
|
|
return (
|
|
<div>
|
|
<p>hasCookie - {JSON.stringify(hasCookie('key'))}</p>
|
|
<p>getCookies - {JSON.stringify(getCookies)}</p>
|
|
<p>getCookie - {getCookie('key')}</p>
|
|
<button type="button" onClick={() => deleteCookie('key')}>
|
|
deleteCookie
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
Using one hook that returns all of the cookie functions:
|
|
|
|
```javascript
|
|
'use client';
|
|
|
|
import { useCookiesNext } from 'cookies-next';
|
|
|
|
function ClientComponent() {
|
|
const { setCookie, hasCookie, deleteCookie, getCookies, getCookie } = useCookiesNext();
|
|
|
|
setCookie('key', 'value');
|
|
|
|
return (
|
|
<div>
|
|
<p>hasCookie - {JSON.stringify(hasCookie('key'))}</p>
|
|
<p>getCookies - {JSON.stringify(getCookies)}</p>
|
|
<p>getCookie - {getCookie('key')}</p>
|
|
<button type="button" onClick={() => deleteCookie('key')}>
|
|
deleteCookie
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
If 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.
|
|
|
|
```javascript
|
|
const getCookies = useGetCookies();
|
|
|
|
useEffect(() => {
|
|
console.log('getCookies', getCookies());
|
|
}, [getCookies]);
|
|
```
|
|
|
|
#### Client functions
|
|
|
|
```javascript
|
|
'use client';
|
|
|
|
import { getCookies, setCookie, deleteCookie, getCookie } from 'cookies-next/client';
|
|
|
|
function ClientComponent() {
|
|
/*
|
|
❗❗❗ 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. -
|
|
https://react.dev/link/hydration-mismatch.
|
|
*/
|
|
|
|
useEffect(() => {
|
|
getCookies();
|
|
getCookie('key');
|
|
setCookie('key', 'value');
|
|
deleteCookie('key');
|
|
hasCookie('key');
|
|
}, []);
|
|
|
|
const handleClick = () => {
|
|
getCookies();
|
|
getCookie('key');
|
|
setCookie('key', 'value');
|
|
deleteCookie('key');
|
|
hasCookie('key');
|
|
};
|
|
|
|
/* .... */
|
|
}
|
|
```
|
|
|
|
### Server-side Usage (App Router)
|
|
|
|
In Server Components:
|
|
|
|
```javascript
|
|
import { getCookie, getCookies, hasCookie } from 'cookies-next/server';
|
|
import { cookies } from 'next/headers';
|
|
|
|
export const ServerComponent = async () => {
|
|
// Read-only operations in Server Components
|
|
const value = await getCookie('test', { cookies });
|
|
const allCookies = await getCookies({ cookies });
|
|
const exists = await hasCookie('test', { cookies });
|
|
|
|
// Note: It's not possible to update cookies in Server Components
|
|
❌ await setCookie("test", "value", { cookies }); // Won't work
|
|
❌ await deleteCookie('test', { cookies }); // Won't work
|
|
|
|
return <div>...</div>;
|
|
};
|
|
```
|
|
|
|
In Server Actions:
|
|
|
|
```javascript
|
|
'use server';
|
|
|
|
import { cookies } from 'next/headers';
|
|
import { setCookie, deleteCookie, getCookie, getCookies, hasCookie } from 'cookies-next/server';
|
|
|
|
export async function serverAction() {
|
|
await setCookie('test', 'value', { cookies });
|
|
await deleteCookie('test', { cookies });
|
|
await getCookie('test', { cookies });
|
|
await getCookies({ cookies });
|
|
await hasCookie('test', { cookies });
|
|
}
|
|
```
|
|
|
|
### API Routes (App Router)
|
|
|
|
```javascript
|
|
import { cookies } from 'next/headers';
|
|
import { NextRequest, NextResponse } from 'next/server';
|
|
import { deleteCookie, getCookie, setCookie, hasCookie, getCookies } from 'cookies-next/server';
|
|
|
|
export async function GET(req: NextRequest) {
|
|
const res = new NextResponse();
|
|
await setCookie('test', 'value', { res, req });
|
|
await getCookie('test', { res, req });
|
|
await getCookies({ res, req });
|
|
await deleteCookie('test', { res, req });
|
|
await hasCookie('test', { req, res });
|
|
|
|
// Using cookies function
|
|
await setCookie('test1', 'value', { cookies });
|
|
await getCookie('test1', { cookies });
|
|
await getCookies({ cookies });
|
|
await deleteCookie('test1', { cookies });
|
|
await hasCookie('test1', { cookies });
|
|
|
|
return res;
|
|
}
|
|
```
|
|
|
|
### Middleware
|
|
|
|
```javascript
|
|
import { NextResponse } from 'next/server';
|
|
import type { NextRequest } from 'next/server';
|
|
import { getCookie, setCookie, deleteCookie, hasCookie, getCookies } from 'cookies-next/server';
|
|
|
|
export async function middleware(req: NextRequest) {
|
|
const res = NextResponse.next();
|
|
await setCookie('test', 'value', { res, req });
|
|
await hasCookie('test', { req, res });
|
|
await deleteCookie('test', { res, req });
|
|
await getCookie('test', { res, req });
|
|
await getCookies({ res, req });
|
|
|
|
return res;
|
|
}
|
|
```
|
|
|
|
## API
|
|
|
|
### setCookie(key, value, options)
|
|
|
|
Sets a cookie.
|
|
|
|
```javascript
|
|
setCookie('key', 'value', options);
|
|
```
|
|
|
|
### getCookie(key, options)
|
|
|
|
Retrieves a specific cookie.
|
|
|
|
```javascript
|
|
const value = getCookie('key', options);
|
|
```
|
|
|
|
### getCookies(options)
|
|
|
|
Retrieves all cookies.
|
|
|
|
```javascript
|
|
const cookies = getCookies(options);
|
|
```
|
|
|
|
### hasCookie(key, options)
|
|
|
|
Checks if a cookie exists.
|
|
|
|
```javascript
|
|
const exists = hasCookie('key', options);
|
|
```
|
|
|
|
### deleteCookie(key, options)
|
|
|
|
Deletes a cookie.
|
|
|
|
```javascript
|
|
deleteCookie('key', options);
|
|
```
|
|
|
|
## Options
|
|
|
|
- `req`: Required for server-side operations (except when using `cookies` function)
|
|
- `res`: Required for server-side operations (except when using `cookies` function)
|
|
- `cookies`: Function from `next/headers`, used in App Router for server-side operations
|
|
- `domain`: Specifies the cookie's domain
|
|
- `path`: Specifies the cookie's path
|
|
- `maxAge`: Specifies the cookie's maximum age in seconds
|
|
- `httpOnly`: Sets the HttpOnly flag
|
|
- `secure`: Sets the Secure flag
|
|
- `sameSite`: Sets the SameSite attribute ('strict', 'lax', or 'none')
|
|
|
|
For more detailed options, refer to the [cookie specification](https://tools.ietf.org/html/rfc6265).
|
|
|
|
## License
|
|
|
|
MIT
|