メインコンテンツまでスキップ

cookies

cookies は 非同期 関数で、Server Component で HTTP の受信リクエストの cookie を読み取り、Server Actions または Route Handlers で送信リクエストの cookie を読み書きすることができます。

app/page.tsx
import { cookies } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

リファレンス​

メソッド​

以下のメソッドが利用可能です：

メソッド戻り値の型説明
get('name')Objectcookie 名を受け取り、名前と値を持つオブジェクトを返します。
getAll()Array of objects一致する名前を持つすべての cookie のリストを返します。
has('name')Booleancookie 名を受け取り、cookie が存在するかどうかに基づいてブール値を返します。
set(name, value, options)-cookie 名、値、およびオプションを受け取り、送信リクエストの cookie を設定します。
delete(name)-cookie 名を受け取り、cookie を削除します。
clear()-すべての cookie を削除します。
toString()Stringcookie の文字列表現を返します。

オプション​

cookie を設定する際、options オブジェクトから以下のプロパティがサポートされています：

オプション型説明
nameStringcookie の名前を指定します。
valueStringcookie に格納される値を指定します。
expiresDatecookie が期限切れになる正確な日付を定義します。
maxAgeNumbercookie の寿命を秒単位で設定します。
domainStringcookie が利用可能なドメインを指定します。
pathString, default: '/'ドメイン内の特定のパスに cookie の範囲を制限します。
secureBooleancookie が HTTPS 接続でのみ送信されるようにして、セキュリティを強化します。
httpOnlyBooleancookie を HTTP リクエストに制限し、クライアント側のアクセスを防ぎます。
sameSiteBoolean, 'lax', 'strict', 'none'cookie のクロスサイトリクエストの動作を制御します。
priorityString ("low", "medium", "high")cookie の優先度を指定します。
encode('value')Functioncookie の値をエンコードするために使用される関数を指定します。
partitionedBooleancookie が分割されているかどうかを示します。

デフォルト値が設定されている唯一のオプションは path です。

これらのオプションについて詳しくは、MDN ドキュメントを参照してください。

Good to know​

  • cookies は 非同期 関数で、Promise を返します。cookie にアクセスするには async/await または React の use 関数を使用する必要があります。
    • バージョン 14 以前では、cookies は同期関数でした。後方互換性を助けるために、Next.js 15 では同期的にアクセスすることも可能ですが、この動作は将来的に廃止される予定です。
  • cookies は Dynamic API であり、返される値は事前に知ることができません。レイアウトやページで使用すると、ルートが動的レンダリングに切り替わります。
  • .delete メソッドは次の場合にのみ呼び出すことができます：
    • Server Action または Route Handler 内。
    • .set が呼び出されるのと同じドメインに属している場合。さらに、削除したい cookie と同じプロトコル（HTTP または HTTPS）でコードが実行される必要があります。
  • HTTP はストリーミングが開始された後に cookie を設定することを許可しないため、Server Action または Route Handler で .set を使用する必要があります。

Server Component で cookie を扱う際には、cookie が基本的にクライアント側のストレージメカニズムであることを理解することが重要です：

  • cookie の読み取り は、クライアントのブラウザがサーバーに送信する HTTP リクエストヘッダー内の cookie データにアクセスするため、Server Component で動作します。
  • cookie の設定 は、Route Handler や Server Action を使用しても、Server Component で直接行うことはできません。これは、cookie が実際にはサーバーではなくブラウザによって保存されるためです。

サーバーはブラウザに cookie を保存するよう指示する（Set-Cookie ヘッダーを介して）ことしかできません。実際の保存はクライアント側で行われます。このため、状態を変更する cookie 操作（.set、.delete、.clear）は、レスポンスヘッダーを適切に設定できる Route Handler または Server Action で実行する必要があります。

例​

(await cookies()).get('name') メソッドを使用して、単一の cookie を取得できます：

app/page.tsx
import { cookies } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

すべての cookie を取得する​

(await cookies()).getAll() メソッドを使用して、一致する名前を持つすべての cookie を取得できます。name が指定されていない場合、利用可能なすべての cookie を返します。

app/page.tsx
import { cookies } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ))
}

Server Action または Route Handler で (await cookies()).set(name, value, options) メソッドを使用して cookie を設定できます。options オブジェクトはオプションです。

app/actions.ts
'use server'

import { cookies } from 'next/headers'

export async function create(data) {
  const cookieStore = await cookies()

  cookieStore.set('name', 'lee')
  // または
  cookieStore.set('name', 'lee', { secure: true })
  // または
  cookieStore.set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  })
}

(await cookies()).has(name) メソッドを使用して、cookie が存在するかどうかを確認できます：

app/page.ts
import { cookies } from 'next/headers'

export default async function Page() {
  const cookieStore = await cookies()
  const hasCookie = cookieStore.has('theme')
  return '...'
}

cookie を削除する​

cookie を削除する方法は3つあります。

delete() メソッドを使用する：

app/actions.ts
'use server'

import { cookies } from 'next/headers'

export async function delete(data) {
  (await cookies()).delete('name')
}

同じ名前と空の値で新しい cookie を設定する：

app/actions.ts
'use server'

import { cookies } from 'next/headers'

export async function delete(data) {
  (await cookies()).set('name', '')
}

maxAge を 0 に設定すると、cookie は即座に期限切れになります。maxAge は秒単位の値を受け取ります。

app/actions.ts
'use server'

import { cookies } from 'next/headers'

export async function delete(data) {
  (await cookies()).set('name', 'value', { maxAge: 0 })
}

バージョン履歴​

バージョン変更点
v15.0.0-RCcookies は非同期関数になりました。codemod が利用可能です。
v13.0.0cookies が導入されました。