[Next.js]API経由でCookieがセットされない場合

はじめに

こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです。）
今回は自分が体験して苦労したNext.jsでのCookieの扱いについて記事にまとめました。

原因

元々は、以下のようにログインするとjwtがCookieにセットされるAPIを呼び出す関数を作成しておりました。

SignIn.ts

export async function SignIn(email: string, password: string) {
  const res = await fetch(`http://localhost:8080/login`, {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: email,
      password: password
    }),
  })
  const data = await res.json()
  return { status: res.status, data: data }
}

バックエンド側でも、CORSの設定してるのになあ…と悩んでいましたが、原因としてはNext.jsでFetch APIのリクエストを行う際に、異なるオリジンへのリクエストにはクッキーや認証情報を含めないことがデフォルトになっていたことでした。（知りませんやん…）

対処法

Fetch APIの中にcredentials: "include"を付けることで、リクエストに対してクッキーや認証ヘッダーといった認証に関する情報を含めるようにするとCookieがセットされるようになります。

SignIn.ts

export async function SignIn(email: string, password: string) {
  const res = await fetch(`http://localhost:8080/login`, {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: email,
      password: password
    }),
    credentials: "include", // 追加
  })
  const data = await res.json()
  return { status: res.status, data: data }
}

さいごに

自分は上記で解決しましたが、これでも解決しない場合がありましたら以下のライブラリでCookieをセットしに行くのも手の一つにはありそうです。

next-client-cookies

（Cookieのバケツリレーみたいになるので好ましくはないですが…）

最後まで見ていただきありがとうございます！
アドバイスや意見などありましたら、是非コメントしていただきたいです！