【Next.js】cookies()の使い方

cookies()とは

cookies()は、Server Component、Server Actions、Route HandlersでCookieを操作するための非同期関数です。この関数を使用することで、Cookieを取得したり、新しいCookieを設定したり、既存のCookieを削除したりすることができます。

Cookieの取得

特定のCookieを取得するには、get('name')を使用します。

import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies();
  const myCookie = cookieStore.get('myCookieName');

  // ...
}

この例では、myCookieNameという名前のCookieを取得しています。

また、getAll()を使用するとすべてのCookieを取得できます。

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

Cookieが存在するか判別

has('name')を使用することで指定したCookieが存在するか判定できます。

import { cookies } from 'next/headers'
 
export default async function Page() {
  const cookieStore = await cookies()
  const hasCookie = cookieStore.has('theme')

  // ...
}

上記ではthemeというCookieが存在するか判定しています。

Cookieの設定

新しいCookieを設定するには、set(name, value, options)を使用します。

'use server'

import { cookies } from 'next/headers';

export async function create(data) {
  const cookieStore = await cookies();
  cookieStore.set('myCookieName', 'myCookieValue', {
    httpOnly: true,
    maxAge: 60 * 60 * 24,
  });

  // ...
}

この例では、myCookieNameという名前のCookieをmyCookieValueという値で設定しています。httpOnlyオプションを指定することでJavaScriptからのアクセスを制限し、maxAgeオプションでCookieの有効期限を設定しています。

optionsの値については以下のページを参照してください。

Server Action内でCookieを設定するとルーターキャッシュが無効になります。
Building Your Application: Caching | Next.js

Cookieの削除

特定のCookieを削除するには、delete(name)を使用します。

'use server'
 
import { cookies } from 'next/headers'
 
export async function delete(data) {
  (await cookies()).delete('myCookieName')
}

'use server'
 
import { cookies } from 'next/headers'
 
export async function delete(data) {
  (await cookies()).set('myCookieName', '')
}

'use server'
 
import { cookies } from 'next/headers'
 
export async function delete(data) {
  (await cookies()).set('myCookieName', 'value', { maxAge: 0 })
}

上記の3つはmyCookieNameという名前のCookieを削除しています。

また、すべてのCookieを削除するにはclear()を使用します。

'use server'
 
import { cookies } from 'next/headers'
 
export async function delete(data) {
  (await cookies()).clear()
}

Server Action内でCookieを削除するとルーターキャッシュが無効になります。
Building Your Application: Caching | Next.js