Zenn
🍪

【Next.js】クライアント、サーバー別 Cookie操作の備忘録

に公開
JavaScript
Next.js
TypeScript
cookie
tech

はじめに

Next.jsでCookieを取得したり、設定したりする方法はサーバーサイドとクライアントサイドで異なります。
それらを整理しました。

クライアントサイドでのCookie操作

クライアントサイドでは、ブラウザのAPI（document.cookie）を使用するか、ライブラリを使用してCookieを操作できます。

ブラウザのAPI（document.cookie）を使用する

正規関数を用いたユーティリティ関数を使用して、ブラウザのAPIでCookie操作する例です。
後続のライブラリを使用する方法の方が簡潔に書けるのでおすすめです。

Cookieを取得する

export function getCookie(name: string): string | null {
  if (typeof document === 'undefined') return null;
  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
  return match ? decodeURIComponent(match[2]) : null;
}

Cookieを設定する

export function setCookie(name: string, value: string, days?: number): void {
  if (typeof document === 'undefined') return;
  
  let expires = '';
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = `; expires=${date.toUTCString()}`;
  }
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
}

Cookieを削除する

export function deleteCookie(name: string): void {
  if (typeof document === 'undefined') return;
  
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

js-cookieなどのライブラリを使用する

js-cookieなどのライブラリを使用することで簡潔にCookie操作することができます。
https://github.com/js-cookie/js-cookie

import Cookies from 'js-cookie';

Cookieを取得する

export function getCookie(name: string): string | undefined {
  return Cookies.get(name);
}

// 全てのCookieを取得する
export function getAllCookies(): Record<string, string> {
  return Cookies.get();
}

Cookieを設定する

export function setCookie(name: string, value: string, days?: number): void {
  Cookies.set(name, value, { expires: days, path: '/' });
}

Cookieを削除する

export function deleteCookie(name: string): void {
  Cookies.remove(name, { path: '/' });
}

サーバーサイドでのCookie操作

Next.jsのApp Routerでは、サーバーコンポーネントやRoute Handlersでクッキーを操作できます。
Next.js のcookies関数が用意されています。
https://nextjs.org/docs/app/api-reference/functions/cookies

import { cookies } from 'next/headers';

Cookieを取得する

const value = cookies().get(name)?.value;

// すべてのCookieを取得する
    const allCookies = cookies().getAll();

Cookieを設定する

  cookies().set({
    name,
    value,
    httpOnly: true,
    path: '/',
    secure: process.env.NODE_ENV === 'production',
    maxAge: maxAge || 60 * 60 * 24 * 7, // デフォルト1週間
    sameSite: 'strict'
  });

Cookieを削除する

  cookies().delete(name);

まとめ

以上、Cookie操作の備忘録でした！

Discussion