我刚刚在Next.js 13中启动了一个简单的项目。在我的项目中没有做太多其他的事情,下面的内容导致了一个水合错误:
import { PrismaClient } from "@prisma/client";
export default async function Events() {
const prisma = new PrismaClient();
const issues = await prisma.event.findMany();
return (
<div>
<h1>Events</h1>
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th>Code</th>
</tr>
{issues.map((issue, key) => (
<tr key={key}>
<td>{issue.title}</td>
<td>{issue.description}</td>
<td>{issue.code}</td>
</tr>
))}
</table>
</div>
);
}
我怀疑这可能与Next.js 13相关,但看不到任何可能触发此事件的内容(我假设视图只显示一次,它将根据新的next行为加载)。
布局只会将其 Package 在div中:
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>App</title>
<meta name="description" />
</head>
<body>{children}</body>
</html>
)
}
有什么想法吗?
1条答案
按热度按时间dnph8jn41#
将数据表的信头数据列 Package 在中,并将主体 Package 在中,就解决了这个问题。
这是根据这里的讨论:https://github.com/vercel/next.js/discussions/36754