cookies

cookies 関数を使用すると、サーバーコンポーネント (Server Component) で HTTP 受信リクエストのクッキーを読み取ったり、サーバーアクション (Server Action) またはルートハンドラー (Route Handler) で送信リクエストのクッキーを書き込んだりできます。

豆知識: cookies() は ダイナミック関数 (Dynamic Function) であり、返される値を事前に知ることはできません。レイアウトやページで使用すると、リクエスト時にルートが 動的レンダリング (dynamic rendering) に切り替わります。

`cookies().get(name)`

クッキー名を受け取り、名前と値を持つオブジェクトを返すメソッドです。name に一致するクッキーが見つからない場合は undefined を返します。複数のクッキーが一致する場合、最初に一致したもののみを返します。

app/page.js

import { cookies } from 'next/headers'

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

`cookies().getAll()`

get と似ていますが、name に一致するすべてのクッキーのリストを返すメソッドです。name が指定されていない場合は、利用可能なすべてのクッキーを返します。

app/page.js

import { cookies } from 'next/headers'

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

`cookies().has(name)`

クッキー名を受け取り、クッキーが存在するかどうかに基づいて boolean を返すメソッドです（存在する場合は true、存在しない場合は false）。

app/page.js

import { cookies } from 'next/headers'

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

`cookies().set(name, value, options)`

クッキー名、値、オプションを受け取り、送信リクエストのクッキーを設定するメソッドです。

豆知識: HTTP ではストリーミング開始後にクッキーを設定できないため、サーバーアクション (Server Action) またはルートハンドラー (Route Handler) で .set() を使用する必要があります。

app/actions.js

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().set('name', 'lee')
  // または
  cookies().set('name', 'lee', { secure: true })
  // または
  cookies().set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  })
}

クッキーの削除

豆知識: クッキーを削除できるのはサーバーアクション (Server Action) またはルートハンドラー (Route Handler) 内のみです。

クッキーを削除するにはいくつかの方法があります:

`cookies().delete(name)`

指定された名前のクッキーを明示的に削除します。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

`cookies().set(name, '')`

または、同じ名前で空の値を持つ新しいクッキーを設定することもできます。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

豆知識: .set() はサーバーアクション (Server Action) またはルートハンドラー (Route Handler) 内でのみ利用可能です。

`cookies().set(name, value, { maxAge: 0 })`

maxAge を 0 に設定すると、クッキーが即座に期限切れになります。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

`cookies().set(name, value, { expires: timestamp })`

expires を過去の任意の値に設定すると、クッキーが即座に期限切れになります。

app/actions.js

'use server'

import { cookies } from 'next/headers'

async function delete(data) {
  const oneDay = 24 * 60 * 60 * 1000
  cookies().set('name', 'value', { expires: Date.now() - oneDay })
}

豆知識: .set() が呼び出されたのと同じドメインに属するクッキーのみを削除できます。さらに、コードは削除したいクッキーと同じプロトコル（HTTP または HTTPS）で実行される必要があります。

バージョン履歴

バージョン	変更内容
`v13.0.0`	`cookies` が導入されました。

サーバーアクションとデータ変更

Next.js でフォーム送信とデータ変更を処理する方法を学びましょう。

サーバーアクションとデータ変更

On this page