Next.jsでCookieを使いこなす！基本から実践まで丁寧に解説

こんにちは、とまだです。

Next.jsでWebアプリを作っていて、 「Cookieってどうやって使うんだろう？」 と悩んだことはありませんか？

私も最初は混乱しました。 サーバーサイドとクライアントサイド、 どっちでどう使えばいいのか。

でも大丈夫です。

今回は現役のエンジニア、 そして元プログラミングスクール講師としての経験から、 Next.jsでのCookie管理について解説します。

Cookieとは？身近な例で理解しよう

Cookieを一言で表すなら、 「ブラウザに保存できる小さなメモ帳」です。

例えば、ショッピングサイトを想像してください。

カートに商品を入れて、 一旦サイトを離れても、 戻ってきたらカートの中身が残っていますよね。

これがCookieの仕組みです。

ブラウザというお財布の中に、 小さなメモを入れておくイメージです。

そのメモには、

• ユーザーID
• ログイン状態
• カートの中身

などの情報が書かれています。

なぜCookieが必要なの？

HTTPという通信の仕組みは、 実は「忘れっぽい」性質があります。

一度通信が終わると、 誰からのリクエストだったか忘れてしまうんです。

まるで、初対面の人と毎回会話するような状態。

だからこそ、Cookieという仕組みで、 「あ、この人は〇〇さんだ」 と覚えておく必要があるんです。

Next.jsならではのCookie事情

Next.jsの特徴は、 サーバーとクライアントの両方で動くこと。

これは便利な反面、 Cookieの扱い方も2パターンあるということです。

でも心配いりません。 それぞれの使い分けを理解すれば、 適切に使い分けられるようになります。

サーバーサイドでのCookie

サーバーサイドは、 「お店の裏側」のようなものです。

お客様（ユーザー）から見えない場所で、 Cookieの中身をチェックしたり、 新しくCookieを作ったりします。

特に重要な情報、 例えばログイン状態の確認などは、 サーバーサイドで行うのが安全です。

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

一方、クライアントサイドは、 「お店の表側」です。

JavaScriptを使って、 ブラウザ上で直接Cookieを操作します。

ただし、セキュリティのため、 重要な情報は扱わないのが鉄則です。

実際にCookieを使ってみよう

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

まずは一番シンプルな方法から。

以下のコードで、Cookieに値を保存できます。

// Cookieに値を保存
document.cookie = "theme=dark; path=/; max-age=86400";

このコードで何をしているか説明します。

theme=darkで、テーマをダークモードに設定。 path=/で、サイト全体で有効に。 max-age=86400で、1日間保存されます。

Cookieを読み取る方法

Cookieの読み取りは少しコツが必要です。

// Cookieを読み取る
const cookies = document.cookie;
console.log(cookies); // "theme=dark; userId=123"

ただ、この方法だと文字列が返ってくるので、 実際に使うときは解析が必要になります。

サーバーサイドでの本格的な使い方

getServerSidePropsでCookieを扱う

サーバーサイドレンダリング時に、 Cookieを確認する方法です。

export async function getServerSideProps(context) {
  const { req, res } = context;

  // リクエストからCookieを取得
  const cookieHeader = req.headers.cookie || "";

  // Cookieに基づいて処理を分岐
  if (cookieHeader.includes("isLoggedIn=true")) {
    // ログイン済みの処理
  }

  return {
    props: {}
  };
}

リクエストヘッダーからCookieを取り出し、 その内容に応じて処理を変えています。

APIルートでの実装例

APIルートでCookieを設定する例です。

// app/api/set-theme/route.js
export async function POST(request) {
  const body = await request.json();
  const { theme } = body;

  // レスポンスヘッダーでCookieを設定
  return new Response("テーマを変更しました", {
    status: 200,
    headers: {
      "Set-Cookie": `theme=${theme}; Path=/; HttpOnly`
    }
  });
}

HttpOnlyを付けることで、 JavaScriptからアクセスできないCookieになります。

これにより、XSS攻撃から守れます。

セキュリティで気をつけるポイント

HttpOnlyフラグを活用しよう

重要な情報を扱うCookieには、 必ずHttpOnlyフラグを付けましょう。

これにより、JavaScriptから読めなくなり、 悪意のあるスクリプトから守れます。

Secureフラグも忘れずに

本番環境ではSecureフラグも重要です。

"Set-Cookie": "sessionId=abc123; HttpOnly; Secure; SameSite=Strict"

このフラグを付けると、 HTTPS通信でのみCookieが送信されます。

SameSite属性で守りを固める

SameSite属性は、 CSRF攻撃から守ってくれる仕組みです。

Strictに設定すると、 同じサイトからのリクエストでのみ、 Cookieが送信されるようになります。

よくある質問と解決策

Q: Cookieが保存されない

A: パスの設定を確認してください。

path=/を指定しないと、 現在のページでしか有効になりません。

Q: サーバーサイドでCookieが取得できない

A: リクエストヘッダーを確認してください。

req.headers.cookieが空の場合、 クライアント側でCookieが設定されていない可能性があります。

Q: Cookieのサイズ制限は？

A: 1つのCookieは約4KBまでです。

大きなデータを保存したい場合は、 別の方法（LocalStorageやデータベース）を検討しましょう。

実践的なCookie活用パターン

テーマ切り替え機能

ユーザーの好みを保存する例です。

// テーマ設定を保存
const setTheme = (theme) => {
  document.cookie = `theme=${theme}; path=/; max-age=31536000`;
  // 1年間保存
};

// テーマを取得
const getTheme = () => {
  const match = document.cookie.match(/theme=([^;]+)/);
  return match ? match[1] : 'light';
};

このような仕組みで、 ユーザーの設定を長期間保存できます。

簡易的なカート機能

商品IDをCookieに保存する例です。

// カートに商品を追加
const addToCart = (productId) => {
  const currentCart = getCart();
  currentCart.push(productId);

  document.cookie = `cart=${JSON.stringify(currentCart)}; path=/`;
};

// カートの中身を取得
const getCart = () => {
  const match = document.cookie.match(/cart=([^;]+)/);
  return match ? JSON.parse(match[1]) : [];
};

JSONを使って配列も保存できます。

ただし、サイズ制限には注意が必要です。

Cookie以外の選択肢も知っておこう

LocalStorageという選択肢

Cookieよりも大きなデータを保存したい場合、 LocalStorageが便利です。

// LocalStorageに保存
localStorage.setItem('userData', JSON.stringify(data));

// LocalStorageから取得
const data = JSON.parse(localStorage.getItem('userData'));

ただし、サーバーサイドでは使えないので、 用途に応じて使い分けましょう。

SessionStorageの特徴

タブを閉じると消えるデータには、 SessionStorageが適しています。

一時的な入力内容の保存などに便利です。

今日から使えるCookie管理

ここまで読んでいただき、 Next.jsでのCookie管理の基本が理解できたはずです。

まずは簡単なテーマ切り替え機能から始めて、 徐々に複雑な機能に挑戦してみてください。

Cookieは便利な仕組みですが、 セキュリティには十分注意が必要です。

HttpOnly、Secure、SameSiteの3つのフラグを、 必要に応じて設定することを忘れずに。

実際にコードを書いて試すことで、 理解がさらに深まります。

今回紹介したサンプルコードを参考に、 自分のプロジェクトでCookieを活用してみてください。