我有一个Next.js本地项目,我正在使用Supabase PostgreSQL数据库和Prisma。我在我的页面上有一个按钮,我想点击,然后创建一个新的数据库条目。这是我的代码:
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
async function uploadToDB(){
const user = await prisma.tableName.create({ data: {name:"Random Name"}})
}
export default function Home() {
return(
<div>
<button onClick={e => uploadToDB()}></button>
</div>
)
}
创建数据库的操作在没有附加到按钮onClick事件时工作正常。有办法做到这一点吗?我收到的错误是:
- error错误:事件处理程序不能传递给客户端组件属性。*
<button className=... onClick={function} children=...>
- 如果您需要交互性,请考虑将其部分转换为stringify上的客户端组件 *
我尝试在页面顶部添加“使用客户端”,但随后收到错误:
- 错误:PrismaClient无法在浏览器中运行 *
任何帮助修复此错误或完整的变通方法将不胜感激。谢谢你!
1条答案
按热度按时间deyfvvtc1#
在Next 13中,所有组件默认都是服务器组件,如果你想要交互性,你需要在顶部添加
use client
指令,请参考这里。我看到,在你添加了
use client
指令后,它抛出了Prisma无法在浏览器中运行的错误,你可以阅读更多关于here错误的信息。要解决此问题,请删除
use client
指令,并使用Next.js Route Handler构建一个路由,该路由使用Prisma创建表,然后在客户端组件中调用该API路由,下面是一个关于Prisma with Next 13的好指南