如何在Next.js 13 App Router中使用NextAuth的Prisma适配器？

问题背景 #

在Next.js 13的App Router环境下，配置NextAuth的Prisma适配器时持续报错。NextAuth Prisma适配器官方文档仅适配pages/api目录，但当前使用的是app/api目录。

已尝试的两种方案及报错 #

方案一 #

在/app/api/auth/[...nextauth]/route.ts中编写代码：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default NextAuth({
    adapter: PrismaAdapter(prisma),
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
});

报错信息：

Error: PrismaClient is unable to be run in the browser.

移除适配器后可正常运行，但无法通过Prisma读写数据库。

方案二 #

参考NextAuth文档调整代码：

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google"

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

报错信息：

Uncaught (in promise) Error: Invariant: Method expects to have requestAsyncStorage, none available

当前Prisma配置（db/prisma.ts） #

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
    prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

正确解决步骤 #

1. 确认依赖版本兼容性 #

确保使用next-auth@^4.20.0+版本，同时安装@auth/prisma-adapter、@prisma/client和prisma依赖，版本需匹配。

2. 修正App Router下的NextAuth路由代码 #

在/app/api/auth/[...nextauth]/route.ts中，强制代码仅在服务端运行，并引入全局Prisma实例：

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/db/prisma"; // 引入全局Prisma实例

// 标记文件仅在服务端执行，避免Prisma在浏览器环境运行
export const runtime = "nodejs";

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  // 可选：若使用数据库存储session，需确保Prisma Schema包含对应模型
  session: {
    strategy: "database",
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

3. 解决requestAsyncStorage报错 #

该报错源于在客户端代码中调用了需要服务端上下文的NextAuth方法：

• 仅在服务器组件中调用getServerSession
• 客户端组件中获取会话需使用useSession钩子，且页面需被SessionProvider包裹

4. 验证Prisma Schema #

确保Prisma Schema包含NextAuth所需模型，可通过以下命令同步数据库：

npx prisma db push

内容的提问来源于stack exchange，提问作者Dwi Setyo Aji