英文:
NextJs 13 / Prisma issues rendering page with data
问题
I'm still learning things so please bear with me.
Using Next 13.4.4
在使用 Next 13.4.4
Set up a postgres database in Vercel
在 Vercel 中设置了一个 Postgres 数据库
Created an api in app src/pages/users as follows
在 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 时，我可以看到我的数据，所以根据我有限的知识，这应该是正常的。
This is what my page looks like (app/users/page.tsx)
这是我的页面的样子 (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 (
<>
List Users
-
{users &&
- {user.name}
users.map((user: User) => (
))}
</>
);
}
现在我有两个（分开的，我相信？）问题
-
当我访问
http://localhost:3000/users时，我可以在 Dev Tools 中看到用户已被检索到。然而，它们不会显示在我渲染的列表中（我可能需要回到我最近浏览的教程中去） -
当我部署（Vercel）并浏览到页面时，我得到... 不对，我在说谎。刚刚检查了一下，我得到了与本地相同的问题...我可以发誓它一直在说
PrismaClient 无法在浏览器中运行。现在我有点困惑了。
如果有人愿意批评我的代码，我对任何建设性的批评都持开放态度。事情与我以前使用的 Angular 完全不同（虽然我也不能称自己是那里的专家）。
英文:
I'm still learning things so please bear with me.
Using Next 13.4.4
Set up a postgres database in Vercel
Created an api in app src/pages/users as follows
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 );
}
}
When I go to http://localhost:3000/api/users I can see my data so based on my limited knowledge that's ok
This is what my page looks like (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>
</>
);
}
Now I have 2 (separate I believe?) issues
-
When I go to
http://localhost:3000/usersI can see the users been retrieved using Dev Tools. However they dont show up in the page in the list I'm rendering (I probably have to go back to the tutorials I've been skimming over lately) -
When I deploy (vercel) and browse to the page I get ... no way, I'm lying. Just checked and I get the same issue as local...Can swear it been saying
PrismaClient is unable to be run in the browser. Confused now
And if anyone would mind crtisizing my code, I'm open to any constructive critic. Things are so different from Angular where I came from (though can't call myself an expert there either)
答案1
得分: 1
setProviders更改为setUsersPrismaClient 无法在浏览器中运行
可能的问题是：
'use client';
import { User} from '@prisma/client';
这可能会将 @prisma/client 打包进去。
你可以尝试只导入类型：
'use client';
import type { User} from '@prisma/client';
或者在客户端组件内部不导入 @prisma/client 的任何内容。
英文:
setProviderstosetUsersPrismaClient is unable to be run in the browser
Possible the issue is:
'use client';
import { User} from '@prisma/client';
This may pull @prisma/client into bundle.
you can try to import only type
'use client';
import type { User} from '@prisma/client';
or do not import anything from @prisma/client inside client component.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论