【Next.js15×Auth0】[Error: Route "/api/auth/[auth0]" used params.auth0. params should be awaited before using its properties.

2024/12/15現在、Auth0のメジャーバージョンではNext.js15対応ができていないため上記エラーが発生する。

対処方法

コード

ベータ版（@auth0/nextjs-auth0@4.0.0-beta.0）を使用する。

npm i @auth0/nextjs-auth0@4.0.0-beta.0

以下のファイルをプロジェクトルートに追加する

middleware.ts

import type { NextRequest } from "next/server"

import { auth0 } from "./lib/auth0"

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
}

プロジェクトルートにlibディレクトリを作成し、以下のファイルを追加する。

lib/auth0.ts

import { Auth0Client } from "@auth0/nextjs-auth0/server"

export const auth0 = new Auth0Client()

ログインボタンのリンク先を下記に変更。

<a href="/auth/login">xxx</a>

ログアウトボタンのリンク先を下記に変更。

<a href="/auth/logout">xxx</a>

Auth0側の設定

アプリケーションはRegular Web Applicationを使用し、設定を下記に変更する。

• Allowed Callback URLs: http://localhost:3000/auth/callback
• Allowed Logout URLs: http://localhost:3000
• Allowed Web Origins: http://localhost:3000

ログイン後のリダイレクト設定

先ほど作成したAuth0のクライアントをカスタマイズする。
以下はログイン後のリダイレクト先を/homeに設定している。

lib/auth0.ts

import { Auth0Client } from "@auth0/nextjs-auth0/server"

export const auth0 = new Auth0Client({
    signInReturnToPath: "/home",
})

参考