cookiesの使い方：サーバーでCookieを読み取り・更新する
cookiesでリクエストのCookieを読む方法を解説します。非同期API、Server Componentと更新処理の違い、セッション値を扱う際の境界を確認します。
cookiesでリクエストのCookieを読む方法を解説します。非同期API、Server Componentと更新処理の違い、セッション値を扱う際の境界を確認します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
await cookies() でCookieストアを取得します。get(name) は名前と値を持つオブジェクトまたはundefinedを返します。読み取りと書き込みでは許可される実行場所が異なります。
コード例を動かす
app/theme-preview/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import { cookies } from 'next/headers';
export default async function ThemePreview() {
const store = await cookies();
const raw = store.get('theme')?.value;
const theme = raw === 'dark' ? 'dark' : 'light';
return <main><h1>テーマ設定</h1><p>選択中: {theme}</p></main>;
}実行結果と処理の順序
ブラウザーの開発者ツールで自分のローカルサイトのtheme Cookieをdarkにし、再読み込みするとdarkと表示されます。未指定や許可していない値はlightになります。
表示設定のCookieで動きを理解してから認証用途を学びます。Cookieに値が存在するだけでは、有効なセッションや本人であることの証明にはなりません。
つまずきやすい点と使い分け
ページ描画中にsetしない
Server ComponentはリクエストのCookieを読めますが、レスポンスCookieの変更はServer ActionやRoute Handlerで行います。ストリーミングが始まった後にヘッダーを変更することもできません。
機密値を画面やログへ出さない
セッションCookieをそのままJSXへ表示するサンプルにしないでください。認証用途では署名やセッション照合に加え、HttpOnly、Secure、SameSite、期限と失効の設計が必要です。
静的出力で使えるか
この例はリクエストごとのサーバー処理を必要とします。output: 'export' で生成した out を配信するだけのサーバーでは実行できません。Next.jsのサーバー実行環境か別のAPIを用意します。
確認課題と実務への応用
自分で値を変えて確認する
themeがdark、light、未指定、不正な値の4パターンを試します。Cookieの値は利用者が変えられるため、管理者権限の判定には直接使えない理由を説明してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。