如何解决NextJS 13.4.2中NextAuth集成MongoDB的top-level-await错误

问题原因 #

你在[...nextauth]文件的最外层使用了顶层await（比如直接写await connectToMongoDB()这类代码），但当前Next.js项目默认未启用顶层await的实验特性，因此触发报错。

具体解决方案 #

方案1：将顶层await封装到异步函数中调用 #

不要直接在文件最外层使用await，把数据库连接等异步逻辑封装成异步函数，再立即调用：

// [...nextauth].js
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { connectToMongoDB } from "../../../lib/mongodb"

// 封装异步配置逻辑
async function getAuthOptions() {
  await connectToMongoDB() // 在函数内部使用await

  return {
    providers: [
      CredentialsProvider({
        async authorize(credentials) {
          // 你的认证业务逻辑
        }
      })
    ],
    // 其他NextAuth配置项
  }
}

// 导出时执行异步函数
export default NextAuth(await getAuthOptions())

方案2：启用Next.js顶层await实验特性（适用于Next.js 12及以上版本） #

在项目根目录的next.config.js中添加实验配置：

// next.config.js
module.exports = {
  experimental: {
    topLevelAwait: true,
  },
}

修改完成后重启开发服务器，让配置生效。

方案3：调整MongoDB连接时机，改为按需连接 #

不在[...nextauth]文件顶层提前连接数据库，而是在实际需要数据库操作的地方（比如authorize回调函数内）再执行连接：

// [...nextauth].js
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { connectToMongoDB } from "../../../lib/mongodb"

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 在需要数据库操作时才连接
        await connectToMongoDB()
        // 后续的数据库查询、验证逻辑
      }
    })
  ],
})

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