🍪 next-universal-cookies 🍪

A proper collection of cookie helpers for use on both the client and server in Next.js applications

Installation

npm

1npm install --save next-universal-cookies

or yarn

1yarn add next-universal-cookies

Usage

Server

Any of the set of helpers can be utilized in getServerSideProps, getInitialProps, API routes. For either getServerSideProps | getInitialProps, just pass in the context object as the first argument. If using the helpers in next API routes, pass req and res as an object in the first parameter:

1import { parseCookies } from 'next-universal-cookies';
2
3const cookies = parseCookies({ req, res })

1// Parsing
2import { getCookieValue, parseCookies } from 'next-universal-cookies';
3
4// Parse all cookies
5const cookies = parseCookies(ctx);
6
7// Parse and get single cookie value by name
8const cookieValue = getCookieValue(ctx, 'cookie'); // returns string
9
10// Parse and get multple cookie values by name
11const { cookie, cookie2 } = getCookieValue(ctx, ['cookie', 'cookie2']); // returns object of values

1// Setting
2import { setCookie } from 'next-universal-cookies';
3
4// Set single cookie
5setCookie(ctx, {
6  name: 'cookie',
7  value: 'cookie-value',
8  options: {
9    path: '/my-path',
10    sameSite: 'strict'
11  }
12});
13
14// or Set multiple cookies
15setCookie(ctx, [
16  {
17    name: 'cookie',
18    value: 'cookie-value',
19    options: {
20      path: '/my-path',
21      sameSite: 'strict',
22    },
23  },
24  {
25    name: 'cookie-too',
26    value: 'cookie-value-too',
27  },
28]);

1// Destroying
2import { destroyCookie } from 'next-universal-cookies';
3
4// Destory cookie with name 'cookie'
5destroyCookie(ctx, 'cookie');

Client

The cookie helpers can also be utilized on the client. The function's input signature is slightly altered when used client side. The context object is no longer required as an argument.

1// Parsing
2import { getCookieValue, parseCookies } from 'next-universal-cookies';
3
4// Parse all cookies
5const cookies = parseCookies();
6
7// Parse and get single cookie value
8const cookieValue = getCookieValue('cookie'); // returns string
9
10// Parse and get multple cookie values by name
11const { cookie, cookie2 } = getCookieValue(['cookie', 'cookie2']); // returns object of values

1// Setting
2import { setCookie } from 'next-universal-cookies';
3
4// Set single cookie
5setCookie({
6  name: 'cookie',
7  value: 'cookie-value',
8  options: {
9    path: '/my-path',
10    sameSite: 'strict'
11  }
12});
13
14// or Set multiple cookies
15setCookie([
16  {
17    name: 'cookie',
18    value: 'cookie-value',
19    options: {
20      path: '/my-path',
21      sameSite: 'strict',
22    },
23  },
24  {
25    name: 'cookie-too',
26    value: 'cookie-value-too',
27  },
28]);

1// Destroying
2import { destroyCookie } from 'next-universal-cookies';
3
4// Destory cookie with name 'cookie'
5destroyCookie('cookie');

Contributors

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT