Nookies – A set of cookie helpers for Next.js :
Quick start
yarn add nookies
You can play with the example code here.
ServerSide cookies
import nookies from 'nookies' export default function Me() { return <div>My profile</div> } export async function getServerSideProps(ctx) { // Parse const cookies = nookies.get(ctx) // Set nookies.set(ctx, 'fromGetInitialProps', 'value', { maxAge: 30 * 24 * 60 * 60, path: '/', }) // Destroy // nookies.destroy(ctx, 'cookieName') return { cookies } }
Client-only Cookies
import { parseCookies, setCookie, destroyCookie } from 'nookies' function handleClick() { // Simply omit context parameter. // Parse const cookies = parseCookies() console.log({ cookies }) // Set setCookie(null, 'fromClient', 'value', { maxAge: 30 * 24 * 60 * 60, path: '/', }) // Destroy // destroyCookie(null, 'cookieName') } export default function Me() { return <button onClick={handleClick}>Set Cookie</button> }
Custom Express server cookies
const express = require('express'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); const { parseCookies, setCookie, destroyCookie } = require('nookies'); app.prepare() .then(() => { const server = express(); server.get('/page', (req, res) => { // Notice how the request object is passed const parsedCookies = parseCookies({ req }); // Notice how the response object is passed setCookie({ res }, 'fromServer', 'value', { maxAge: 30 * 24 * 60 * 60, path: '/page', }); // destroyCookie({ res }, 'fromServer'); return handle(req, res); }); );
Reference
For client side usage, omit the
ctx
parameter. You can do so by setting it to an empty object ({}
),null
orundefined
.
parseCookies(ctx, options)
or nookies.get(ctx, options)
- ctx:
Next.js context
||(Express request object)
- options:
- decode:
a custom resolver function (default: decodeURIComponent)
- decode:
setCookie(ctx, name, value, options)
or nookies.set(ctx, name, value, options)
Don’t forget to end your response on the server with
res.send()
.
- ctx:
(Next.js context)
||(Express request object)
- name: cookie name
- value: cookie value
- options:
- domain
- encode
- expires
- httpOnly
- maxAge
- path
- sameSite
- secure
destroyCookie(ctx, name, options)
or nookies.destroy(ctx, 'token', options)
Don’t forget to end your response on the server with
res.send()
. This might be the reason your cookie isn’t removed.
- ctx:
(Next.js context)
||(Express response object)
- name: cookie name
- options:
- domain
- path