postgresql NextJs 13 / Prisma问题渲染页面与数据

gcmastyq  于 2023-06-22  发布在  PostgreSQL
关注(0)|答案(1)|浏览(165)

我还在学习中,请多多包涵。使用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)

pokxtpni

pokxtpni1#

  1. setProviderssetUsers
  2. PrismaClient is unable to be run in the browser
    问题可能是:
'use client';
import { User} from '@prisma/client';

这可以将@prisma/client拉入捆绑。
您可以尝试只导入类型

'use client';
import type { User} from '@prisma/client';

或者不从客户端组件内部的@prisma/client导入任何内容。

相关问题