︙

cookies

cookies関数は、Server Componentからの HTTP の着信 request cookies を読み取るか、またはServer ActionまたはRoute Handlerで発信の request cookies を書き込むことができます。

Good to know: cookies()は、返される値を事前に知ることができない**Dynamic Function** です。これを layout やページで使用すると、 route が request 時に**dynamic rendering** を選択します。

`cookies().get(name)`

cookie の名前を受け取り、名前と value を含む object を返す method です。name という名前の cookie が見つからない場合は、undefined を返します。複数の cookies が一致する場合は、最初に一致したもののみを返します。

app/page.js

import { cookies } from 'next/headers'

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

`cookies().getAll()`

getに似た method で、一致するnameを持つすべての cookies のリストを返します。nameが指定されていない場合、利用可能なすべての cookies を返します。

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)`

cookie の名前を入力し、cookie が存在する(true)か否か(false)に基づいてbooleanを返す method。

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)`

cookie 名、value、および options を取り、出力用の request cookie を設定する method。

Good to know: HTTP はストリーミングが開始した後に cookies を設定することは許可していませんので、Server ActionまたはRoute Handlerで.set()を使用する必要があります。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

Deleting cookies

Good to know: Server ActionまたはRoute Handlerでのみ delete cookies を行うことができます。

cookie を削除するためのいくつかの options があります：

`cookies().delete(name)`

あなたは特定の名前の cookie を明示的に delete することができます。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

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

あるいは、同じ名前と empty value を持つ新しい cookie を設定することもできます。

app/actions.js

'use server'

import { cookies } from 'next/headers'

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

Good to know: .set()は、Server ActionまたはRoute Handlerでのみ利用可能です。

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

maxAgeを 0 に設定すると、cookie はすぐに期限切れになります。

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を過去の value に設定すると、cookie はすぐに期限切れになります。

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 })
}

Good to know： .set()が呼び出された同じドメインが所持している delete cookies のみを削除することができます。さらに、 code は、削除する cookie と同じプロトコル( delete または HTTP S)上で実行されなければなりません。

Version History

Version	Changes
`v13.0.0`	`cookies` が導入されました。