Next.js App Router の Server Component で cookies() を使ってクッキーを扱う際の説明として正しいものはどれですか？

解説

正解は「await cookies() で取得したオブジェクトの get() で値を読めるが」です。Next.js 15 以降の cookies() は Promise を返す非同期関数で、Server Component からはクッキーの読み取りのみが可能です。cookies() の基本的な使い方cookies() は next/headers からインポートする関数で、受信したリクエストのクッキーを扱えます。戻り値は Promise なので、await してから get() や has() などのメソッドを呼びます。import { cookies } from 'next/headers' export default async function Page() { const cookieStore = await cookies() // Promise を解決してから使う const theme = cookieStore.get('theme') // { name, value } または undefined return <p>テーマ: {theme?.value ?? 'light'}</p> }なお、cookies() を使ったページはビルド時に静的生成されず、リクエストごとに描画される動的レンダリングになります。誤答が誤りである理由「cookies() は同期関数なので」: Next.js 14 までは同期的に呼べましたが、15 で非同期に変更されました。15 では移行用に同期アクセスが一時的に残されていたものの非推奨で、16 で削除されています。「Server Component 内で cookies().set() を呼べば」: Server Component の描画中は HTML のストリーミングが始まっていることがあり、レスポンスヘッダー（クッキーを運ぶ部分）を変更できません。そのため set() や delete() はエラーになります。「cookies() は next/headers ではなく next/server から」: next/server は NextRequest や NextResponse などを提供するモジュールで、cookies() は next/headers から読み込みます。ログイン時のトークン保存は Server Action か Route Handler に書く「ページ表示のついでにクッキーへ保存したい」と考えて Server Component に set() を書いてしまうのは典型的なつまずきです。クッキーの書き込み・削除は、Server Action（フォーム送信などから呼ばれるサーバー側の関数）か Route Handler（route.ts で定義する API エンドポイント）で行います。'use server' import { cookies } from 'next/headers' export async function saveTheme(theme: string) { const cookieStore = await cookies() cookieStore.set('theme', theme) // Server Action 内なので書き込める }参考Functions: cookies | Next.js