JSPM

  • Created
  • Published
  • Downloads 234221
  • Score
    100M100P100Q175187F
  • License MIT

A set of cookie helpers for Next.js

Package Exports

  • nookies

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nookies) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

nookies 🍪 🍪 🍪

CircleCI npm version

A collection of cookie helpers for Next.js

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

Setting and destroying cookies also works on server-side.

Sponsored By LabelSync

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
  const cookies = 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
  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 ({}).

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

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

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

  • 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 cookies.destroy(ctx, 'token', options)

  • ctx: (Next.js context) || (Express response object)
  • name: cookie name
  • options:
    • domain
    • path

License

MIT