Next.js 14中如何懒初始化Auth.js(v5 Beta)配置并规避中间件错误

问题原因 #

你当前的Auth配置采用了动态初始化方式（将req传入NextAuth()函数），这会导致auth函数的生成依赖于请求实例，而Next.js的Middleware要求在构建/启动时就必须导出明确的中间件函数，因此触发Error: The Middleware "/src/middleware" must export a middleware or a default function错误。

解决方案 #

将需要访问req的逻辑迁移到Auth.js配置的动态回调/配置项中，而非直接在NextAuth()初始化时传入req。这样既能保留对请求自定义Cookie的访问权限，又能保证auth函数是静态导出的，符合Middleware的要求。

1. 修改Auth配置文件 #

把原本在NextAuth(req => {})中的逻辑，移到支持动态参数的配置项（比如providers、callbacks等）中，示例如下：

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const { handlers, auth } = NextAuth({
  // 将providers设为接收req的函数，在这里访问自定义Cookie
  providers: async (req) => {
    // 获取自定义Cookie
    const customCookie = req.cookies.get("your-custom-cookie")?.value
    // 根据Cookie值执行自定义处理（比如动态选择登录提供商）
    console.log("自定义Cookie值:", customCookie)
    
    return [GitHub]
  },

  // 若需要在会话阶段访问req，可使用session回调
  callbacks: {
    async session({ session, req }) {
      const customCookie = req.cookies.get("your-custom-cookie")?.value
      session.customData = customCookie
      return session
    }
  }
})

2. 保留原Middleware代码 #

你的Middleware代码无需修改，保持原样即可：

import { auth } from "@/auth"

export default auth((req) => {
  // 自定义逻辑
})

关键说明 #

• Auth.js v5支持将多个配置项设为异步函数并接收req参数，这是官方推荐的动态配置方式，而非直接在NextAuth()初始化时传入req。
• 这种方式既满足了你访问请求自定义Cookie的需求，又保证了auth函数是静态导出的，让Next.js能正确识别Middleware的导出函数。

内容的提问来源于stack exchange，提问作者Tejas