Next.js+Prisma点击按钮创建数据库条目报错求助

问题场景 #

开发基于Next.js、Supabase PostgreSQL和Prisma的本地项目时，尝试通过页面按钮点击创建数据库条目，遇到两个连续错误：

1. 未添加'use client'时，报错：Event handlers cannot be passed to Client Component props.，提示需要转换为客户端组件实现交互
2. 添加'use client'后，新报错：Error: PrismaClient is unable to be run in the browser

核心原因 #

PrismaClient是服务端依赖，只能在Node.js环境运行，不能直接在浏览器（客户端组件）中调用；而Next.js的默认页面是服务器组件，无法绑定点击事件这类客户端交互逻辑，因此需要分离客户端交互和服务端数据库操作，通过API Route作为中间层来实现。

完整解决步骤 #

1. 创建API Route处理数据库写入

在Next.js项目中新增API路由文件，用于接收客户端请求并执行Prisma数据库操作：

// app/api/create-entry/route.ts（App Router 版本）
// 若使用Pages Router，路径为 pages/api/create-entry.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function POST(request: Request) {
  try {
    // 若需要接收客户端传递的动态数据，可解析request.body
    // const { name } = await request.json();
    const user = await prisma.tableName.create({
      data: { name: "Random Name" } // 或使用动态传入的name
    });
    return Response.json({ success: true, user });
  } catch (error) {
    return Response.json(
      { success: false, error: (error as Error).message },
      { status: 500 }
    );
  } finally {
    await prisma.$disconnect();
  }
}

2. 修改页面为客户端组件，通过API调用完成交互

在页面顶部添加'use client'声明为客户端组件，点击按钮时通过fetch调用上述API路由，而非直接调用Prisma：

'use client';

export default function Home() {
  async function uploadToDB() {
    try {
      // 若需要传递动态数据，可在body中携带
      // const response = await fetch('/api/create-entry', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ name: "用户输入的名称" })
      // });
      const response = await fetch('/api/create-entry', { method: 'POST' });
      const data = await response.json();
      
      if (data.success) {
        console.log('条目创建成功:', data.user);
        // 可添加成功提示的UI反馈，比如弹窗或文本提示
      } else {
        console.error('创建失败:', data.error);
      }
    } catch (error) {
      console.error('请求出错:', error);
    }
  }

  return (
    <div>
      <button onClick={uploadToDB}>创建数据库条目</button>
    </div>
  );
}

额外注意事项 #

• 确保已运行npx prisma generate生成Prisma客户端代码
• 生产环境需添加权限验证（如用户登录校验），避免未授权的数据库操作
• 若使用动态数据，需在API路由中做好参数校验和错误处理

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