【Next.js】Server ActionsでブラウザにCookieをセットする方法

Cookieをクライアントにセットするための関数を作成

クライアントでCookieをセットするための関数を以下の手順で作成します。

まずset-cookie-parserをインストールします。

ターミナル

npm install --save set-cookie-parser

次にproxy-server-cookies.tsを作成します。
Server ActionsでのSet-Cookieヘッダーの値をcookies().setでセットしなおしています。

proxy-server-cookies.ts

import 'server-only'
import { cookies } from 'next/headers'
import setCookieParser from 'set-cookie-parser'

export function proxyServerCookies(headers: Headers) {
  const setCookie = headers.get('set-cookie')

  if (setCookie !== null) {
    const splitCookieHeaders = setCookieParser.splitCookiesString(setCookie)
    const cookieObjects = setCookieParser.parse(splitCookieHeaders)

    cookieObjects.forEach((cookieObject) => {
      const { name, value, sameSite, ...rest } = cookieObject
      cookies().set(name, value, {
        sameSite: sameSite === 'strict' ? 'strict' : 'lax',
        ...rest,
      })
    })
  }
}

上記の関数を使用してCookieをセットする

以下のように作成した関数を使用します。

'use server'

import { cookies } from 'next/headers'
import { proxyServerCookies } from './proxy-server-cookies'

export async function sample() {
  try {
    const res = await fetch(
      "http://example.com/sample",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Cookie: cookies().toString(),
        },
        body: JSON.stringify({
          // ...
        }),
      }
    )

    // ...
  
    proxyServerCookies(res.headers)

    // ...
  } catch (err) {
    // ...
  }
}

参考