cookies

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

補足: cookies()は**ダイナミック関数であり、返される値を事前に知ることはできません。レイアウトやページで使用すると、ルートはリクエスト時にダイナミックレンダリング**が有効になります。

`cookies().get(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と似ていますが、一致する名前のすべてのクッキーをリストで返すメソッドです。名前を指定しない場合、利用可能なすべてのクッキーを返します。

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 cookiesList = cookies()
  const hasCookie = cookiesList.has('theme')
  return '...'
}

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

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

補足: HTTPではストリーミング開始後にクッキーを設定できないため、サーバーアクションまたはルートハンドラーで.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: '/',
  })
}

クッキーの削除

補足: クッキーを削除できるのはサーバーアクションまたはルートハンドラー内のみです。

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

`cookies().delete(name)`

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

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

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

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

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

補足: .set()はサーバーアクションまたはルートハンドラーでのみ利用可能です。

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

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

app/actions.js

'use server'

import { cookies } from 'next/headers'

async function create(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 create(data) {
  const oneDay = 24 * 60 * 60 * 1000
  cookies().set('name', 'value', { expires: Date.now() - oneDay })
}

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

バージョン履歴

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

On this page