我还在学习中,请多多包涵。使用Next 13.4.4在Vercel中设置postgres数据库在app src/pages/users
中创建API,如下所示
import { prisma } from '@/lib/prisma';
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method === 'GET') {
const users = await prisma.users.findMany();
res.json(users );
}
}
当我转到http://localhost:3000/api/users
时,我可以看到我的数据,因此基于我有限的知识,这是可以的
这是我的页面看起来像(app/users/page.tsx
)
'use client';
import { User} from '@prisma/client';
import { useEffect, useState } from 'react';
async function getData() {
const res = await fetch('api/users');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function UsersPage() {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
getData().then((users) => {
setUsers(users);
console.log(users);
});
}, []);
return (
<>
<h1>List Users</h1>
<ul>
{users &&
users.map((user: User) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</>
);
}
现在我有两个(我相信?)问题
1.当我转到http://localhost:3000/users
时,我可以看到使用Dev Tools检索到的用户。然而,它们并没有显示在我渲染的列表中(我可能要回到我最近浏览的教程中)
1.当我部署(vercel)并浏览到我得到的页面时...不可能,我在撒谎。刚刚检查,我得到了同样的问题,因为当地...可以发誓它一直在说PrismaClient is unable to be run in the browser
。现在很困惑
如果有人介意批评我的代码,我对任何建设性的批评都持开放态度。事情与我来自的Angular非常不同(尽管我也不能称自己为Maven)
1条答案
按热度按时间pokxtpni1#
setProviders
至setUsers
PrismaClient is unable to be run in the browser
问题可能是:
这可以将
@prisma/client
拉入捆绑。您可以尝试只导入类型
或者不从客户端组件内部的
@prisma/client
导入任何内容。