Zenn
📝

Next.js v14 ログアウト時にCookieを削除する機能実装に少しハマった件の対処法

2024/05/04に公開
Next.js
cookie
tech

Next.js v14でログアウト時にCookieを削除する機能を実装しているときに、少しハマったのでその対処法を共有します。

前提

  • Next.js v14 App Routerで開発
  • ログアウト時にCookieを削除する機能を実装している
  • ログイン時に'__session'というCookieをセットしている
  • ログアウト時に'__session'というCookieを削除する
  • Cookieの削除にはNext.jsの'cookies().delete(name)'を使用する
  • httpクライアントはaxiosを使用する

ハマったところ

ログアウト時にCookieを削除する際、最初は以下のようなコードを実装していました。
Next.jsのドキュメントを見たところ、Cookieの削除にはいくつかやり方があったのですが、一番簡単にできる'cookies().delete(name)'を使用しました。

src/app/api/auth/session/route.ts(誤った記述)
export function DELETE() {
  return cookies().delete('__session');
}

しかし、このコードでは500エラーが発生してしまいました。
原因を調べたところ、APIのレスポンスが適切ではないことが判明しました。
cookies().delete()メソッドはundefinedを返すため、そのままreturnすると、APIのレスポンスもundefinedになってしまいます。
そのためAPIの呼び出し元が期待するレスポンスにならず、エラーが発生してしまったようです。

対処法

対処法として、以下のようにコードを修正しました。

src/app/api/auth/session/route.ts(適切な記述)
export function DELETE() {
  cookies().delete('__session');
  return NextResponse.json({ status: 'success' }, { status: 200 });
}

この修正では、cookies().delete()でCookieを削除した後、NextResponse.json()メソッドを使用して明示的にレスポンスを返しています。
レスポンスには、処理の結果を示すステータスコード（200：成功）とともに、JSON形式のデータ（{ status: 'success' }）を含めています。

このようにレスポンスを返すことで、APIの呼び出し元は処理の結果を明確に取得することができ、ログアウト時にCookieを削除することもできました。

まとめ

Next.js v14でログアウト時にCookieを削除する際、単にcookies().delete()の結果を返すだけではエラーが発生してしまうため、適切なレスポンスを返すために、NextResponse.json()メソッドを使用して明示的にレスポンスを返す必要があることがわかりました。

Discussion