Next.jsでCookieを扱うための基礎と実践方法

フロントエンド開発•2025/1/26

Next.js React JavaScript

はじめに

Cookieはウェブ開発において欠かせない存在といえるでしょう。ユーザー情報の保持やセッション管理など、いろいろな場面で役立ちます。

ただ、Cookieの仕組みや使い方については「どうやって設定すればいいのか」「サーバーサイドとクライアントサイドで扱い方が違うのか」など、初心者の方には少しハードルが高く感じられるかもしれません。

ここではNext.jsを使ったCookieの扱い方を具体的に見ていきます。初めてCookieの活用に触れる方でも理解しやすいよう、なるべく平易にまとめました。

最終的には、サーバーサイドレンダリングやクライアントサイドレンダリングでCookieをどのように扱うのかを一通り理解することを目指します。では、さっそく始めていきましょう。

この記事を読むとわかること

Next.jsでCookieを保存・読み取るための基本的な流れ
サーバーサイドとクライアントサイド、両方でのCookie操作方法
Cookieを扱う上で気をつけるべきセキュリティ上のポイント

Cookieの基本的な役割

Cookieとは、ユーザーのブラウザに保存される小さなテキスト情報のことです。ユーザーの識別情報やログイン状態などを保持し、次回のアクセス時に同じ情報を参照できるようにします。

ウェブページをまたいで同じ情報にアクセスできるため、セッション管理やカート機能など、さまざまな機能で活用されます。一方で、機密情報がCookieに保存されている場合は、その取り扱いに注意が必要です。

クライアントサイドでもサーバーサイドでもCookieを読み書きできますが、Next.jsの場合はサーバーサイドレンダリングができるため、Cookieの扱い方が少し複雑になることがあります。その分、サーバーを介してCookieにアクセスしやすいメリットもあります。

Cookieはただのテキスト

Cookieに保存されるデータはテキスト形式なので、複雑な構造をそのまま保存するには向いていません。 JSON形式の文字列に変換して保存するなどの工夫が一般的に行われます。

Next.jsにおけるCookieの扱いの特徴

Next.jsは、ページの表示にサーバーサイドレンダリング(SSR)とクライアントサイドレンダリング(CSR)の両方を組み合わせることができます。そのため、Cookieを扱うタイミングや方法が複数存在します。

サーバーサイドではHTTPリクエストのヘッダーを経由してCookieにアクセスできるので、ユーザーのリクエストを受け取るたびに認証や状態管理などを行うことが可能です。一方、クライアントサイドでも通常のJavaScriptを使ってCookieを読み書きできますが、セキュリティ上の観点から制限をかけられていることがあります。

Cookieを使う目的や用途によって、どのタイミングでCookieを読み書きするかを決めることが重要です。サーバーサイドの認証が必要な場合はSSR時にCookieを参照し、ユーザーインタラクション後に値を更新する必要がある場合はCSRで更新するといった使い分けが考えられます。

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

クライアントサイドでCookieを操作するときは、ブラウザのAPIを利用して書き込みや読み込みを行います。もっともオーソドックスな方法としては、document.cookie を直接扱うやり方が挙げられます。

document.cookie = "userId=12345; path=/; max-age=3600";

上記のように文字列をセットすると、ブラウザ側にCookieが保存されます。一方、読み取る場合は document.cookie を参照すると、保存されているCookieを取得できます。

ただし、この方法だとCookieの文字列が連結された形で返ってくるため、パース処理が必要になります。そのため、実際にはCookieの読み書きを簡単にしてくれるライブラリを利用することもよくあります。

クライアントサイドでの注意点

クライアントサイドでは、JavaScriptからCookieを取得できない設定（HttpOnlyなど）がされている場合、document.cookie ではアクセスできません。これはセキュリティ対策として推奨される設定で、HttpOnlyを有効にするとスクリプトからは読み取れないようにできます。

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

Next.jsには、ページやAPIルートで実行されるサーバーサイドのコードがあります。このサーバーサイドのコードでCookieを操作する方法は、大まかに2つ考えられます。

ページのサーバーサイド処理でCookieを扱う

従来のページルーティング（pages/ディレクトリを使う構成）であれば、getServerSideProps を使ってCookieを取り扱います。サーバー側でリクエストのヘッダーを読み取り、Cookieの内容を取得するイメージです。


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

  // 例: Cookieを読み取る
  const cookies = req.headers.cookie || "";
  // 必要に応じてCookieをパースして処理を行う

  // 例: Cookieを設定する
  res.setHeader("Set-Cookie", [
    "sessionId=abc123; Path=/; HttpOnly"
  ]);

  return {
    props: {} // ページコンポーネントへ渡すprops
  };
}

上記の例では、req.headers.cookie でクライアントから送られてきたCookieを取得し、res.setHeader でCookieを新たにセットしています。

APIルートでCookieを扱う

APIルート（/pages/api/ または /app/api/ディレクトリを利用する構成）を使えば、サーバーサイドのエンドポイントとしてCookieを操作できます。以下のように、req.headers.cookie からCookieを取得したり、res.setHeader でCookieを設定したりします。


// app/api/login/route.js の一例
export async function POST(request) {
  const { headers } = request;
  const cookieHeader = headers.get("cookie") || "";

  // ここでCookieを取り出す処理を挟む
  // 例: 何らかのセッションIDなどを解析する

  // Set-Cookieヘッダーで新たにCookieをセット
  return new Response("Cookie set!", {
    status: 200,
    headers: {
      "Set-Cookie": "userId=12345; Path=/; HttpOnly"
    }
  });
}

このようにAPIルート内でCookieを操作すると、認証関連のロジックを分離しやすくなります。リクエストが来るたびにCookieをチェックして、必要に応じて更新や削除を行うことも可能です。

まとめ

ここまで、Next.jsでCookieを扱うための基本的な流れと、サーバーサイドとクライアントサイドでのCookie操作方法を見てきました。 Cookieはウェブアプリケーションの中でも重要な役割を果たしていますが、その扱い方には注意が必要です。サーバーサイドでのCookie操作は、セキュリティ上の観点からも慎重に行うことが求められます。

この記事では、Cookieの基本的な概念からNext.jsでの扱い方までをカバーしました。ぜひ、これらの知識を活かして、より安全かつ効率的なCookie管理を行ってください。