はじめに

外資就活ドットコムでは、ユーザーのセッション管理にCookieを利用しています。現在、セキュリティ強化を目的として、セッション管理のアップデートが進行中です。

この記事では、Next.js上でCookieを扱う方法を紹介します。

Cookieとはなにか

Cookieとは主にセッション管理やユーザー情報の一時的な保管のために使われる技術で、たくさんのWebサービスで利用されています。

nookiesの紹介

Next.jsでCookieを扱うには、『nookies』というライブラリがおすすめです。

https://github.com/maticzav/nookies

軽量かつ簡単にCookieの取得・設定・削除ができ、サーバーサイドレンダリングにも対応しています。

パッケージの追加方法

yarn add nookies

サーバーサイドでの使い方

サーバーサイドでcookieを扱う場合は引数にNext.js contextを渡す必要があります。

設定の際にCookieの属性の指定も簡単に行うことができます。

設計によっては、context.req.cookie自体を書き換える必要がありますが、通常の取得・設定・削除だけであれば下記の取り扱い方で十分だと思います。

// Cookieの取得と設定
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: '/',
  })

  return { cookies }
}

// Cookieの取得と削除
import nookies from 'nookies'

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

export async function getServerSideProps(ctx) {
  // Parse
  const cookies = nookies.get(ctx)

  // Destroy
  nookies.destroy(ctx, 'cookieName')

  return { cookies }
}

クライアントサイドでの使い方

クライアントサイドでの使い方はもっとシンプルで、Next.js contextを引数に渡す必要はありません。

またサーバーサイドでの使用と同様に、設定の際にCookieの属性の指定も簡単に行うことができます。

// Cookieの取得と設定
import { parseCookies, setCookie } 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: '/',
  })
}

export default function Me() {
  return <button onClick={handleClick}>Set Cookie</button>
}

// Cookieの削除
import { parseCookies, destroyCookie } from 'nookies'

function handleClick() {
  // Simply omit context parameter.
  // Parse
  const cookies = parseCookies()
  console.log({ cookies })

  // Destroy
  destroyCookie(null, 'cookieName')
}

export default function Me() {
  return <button onClick={handleClick}>Delete Cookie</button>
}