Next.js 13集成NextAuth Google Provider与Prisma时的错误排查

错误核心原因 #

你遇到的两个错误本质是Next.js 13 App Router 对 API 路由的导出规则限制：

• App Router 下的 route.ts 不允许使用默认导出（export default），必须导出对应 HTTP 方法的命名函数（如 GET、POST）。
• 你的路由文件未导出任何 HTTP 处理方法，导致 Next.js 无法识别请求入口。

修正步骤 #

1. 修复 route.ts 文件 #

将原来的默认导出改为创建 NextAuth handler 后，导出 GET 和 POST 命名函数：

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

// 实例化 Prisma Client
const prisma = new PrismaClient();

const handler = NextAuth({
  // 配置 Prisma Adapter 连接数据库
  adapter: PrismaAdapter(prisma),
  // Google 登录提供者配置
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  // 可选：配置 Session 策略（database 或 jwt，按需选择）
  session: {
    strategy: "database",
  },
});

// 关键：导出 GET 和 POST 方法供 Next.js 识别
export { handler as GET, handler as POST };

2. 确保 Prisma Schema 配置正确 #

NextAuth 的 Prisma Adapter 需要特定数据库模型支撑，检查你的 schema.prisma 是否包含以下内容（缺失则添加）：

// schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql" // 替换为你使用的数据库（如 mysql、sqlite）
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  sessions      Session[]
  accounts      Account[]
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: CASCADE)
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?
  user              User    @relation(fields: [userId], references: [id], onDelete: CASCADE)

  @@unique([provider, providerAccountId])
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

添加完成后执行数据库迁移：

npx prisma migrate dev

3. 配置 Session Provider（组件使用会话时必需） #

在根布局文件 app/layout.tsx 中包裹 SessionProvider，确保组件能正常获取会话信息：

// app/layout.tsx
import { SessionProvider } from "next-auth/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

额外检查项 #

• 确认 .env.local 中的 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、DATABASE_URL 配置无误。
• 组件中调用 signIn、signOut、useSession 时，需从 next-auth/react 导入，避免使用旧路径。

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