nookies

What is nookies?

Nookies is a simple utility for handling cookies in Next.js applications. It provides a straightforward API for setting, getting, and destroying cookies on both the client and server sides.

What are nookies's main functionalities?

Set a Cookie

This feature allows you to set a cookie in a Next.js application. The code sample demonstrates how to set a cookie named 'cookieName' with a value of 'cookieValue' that expires in 30 days.

const nookies = require('nookies');

// In a Next.js API route or getServerSideProps
export function handler(req, res) {
  nookies.set({ res }, 'cookieName', 'cookieValue', {
    maxAge: 30 * 24 * 60 * 60,
    path: '/',
  });
  res.end('Cookie set');
}

Get a Cookie

This feature allows you to retrieve a cookie in a Next.js application. The code sample demonstrates how to get the value of a cookie named 'cookieName'.

const nookies = require('nookies');

// In a Next.js API route or getServerSideProps
export function handler(req, res) {
  const cookies = nookies.get({ req });
  res.end(`Cookie value: ${cookies.cookieName}`);
}

Destroy a Cookie

This feature allows you to destroy a cookie in a Next.js application. The code sample demonstrates how to destroy a cookie named 'cookieName'.

const nookies = require('nookies');

// In a Next.js API route or getServerSideProps
export function handler(req, res) {
  nookies.destroy({ res }, 'cookieName');
  res.end('Cookie destroyed');
}

Other packages similar to nookies

cookie

The 'cookie' package is a simple, lightweight library for parsing and serializing cookies. It is more general-purpose and can be used in any Node.js application, not just Next.js. However, it does not provide the same level of integration with Next.js as nookies.

js-cookie

The 'js-cookie' package is a popular library for handling cookies in the browser. It provides a simple API for setting, getting, and removing cookies on the client side. Unlike nookies, it does not support server-side operations, making it less suitable for Next.js applications that require server-side cookie handling.

universal-cookie

The 'universal-cookie' package is designed to work in both browser and Node.js environments. It provides a consistent API for handling cookies on both the client and server sides. While it offers similar functionality to nookies, it is not specifically tailored for Next.js applications.

README

nookies :cookie: :cookie: :cookie:

A collection of cookie helpers for Next.js

• SSR support, for setter, parser and destroy
• super light
• perfect for authentication

Setting and destroying cookies also works on server-side.

Quick start

npm install --save nookies

Demo

Try a demo of the example code below here:

Demo on CodeSandbox

getServerSideProps cookies (SSR + Client)

import { parseCookies, setCookie, destroyCookie } from 'nookies'

export default function Me({ cookies }) {
  return (
    <div>
      My profile. Cookies:
      <ul>
        {cookies &&
          Object.entries(cookies).map(([name, value]) => (
            <li>
              {name}: {value}
            </li>
          ))}
      </ul>
    </div>
  )
}

export async function getServerSideProps({ ctx }) {
  // Parse
  parseCookies(ctx)

  // Set
  setCookie(ctx, 'fromGetServerSideProps', 'value', {
    maxAge: 30 * 24 * 60 * 60,
    path: '/',
  })

  // Destroy
  // destroyCookie(ctx, 'cookieName')

  return { cookies };
};

OR

import nookies from 'nookies'

export default function Me () {
  return <div>My profile</div>
}

export async function getServerSideProps({ ctx }) {
  // Parse
  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>
}

Reference

For client side usage, omit the ctx parameter. You can do so by setting it to an empty object ({}).

parseCookies(ctx, options) or cookies.get(ctx, options)

• ctx: Next.js context
• options:
  • decode: a custom resolver function (default: decodeURIComponent)

setCookie(ctx, name, value, options) or cookies.set(ctx, name, value, options)

• ctx: (Next.js context)
• name: cookie name
• value: cookie value
• options:
  • domain
  • encode
  • expires
  • httpOnly
  • maxAge
  • path
  • sameSite
  • secure

destroyCookie(ctx, name, options) or cookies.destroy(ctx, 'token', options)

• ctx: (Next.js context)
• name: cookie name
• options:
  • domain
  • path

License

MIT