I recently created a basic project in Next.js 13 and encountered a Hydration Error even though my project is not doing much. The code snippet below seems to be the cause of the issue:
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>
);
}
Although I suspect this might be related to Next.js 13, I am unable to pinpoint the exact cause as the view should only render after it has fully loaded based on the updated behavior of Next.
The layout structure simply involves wrapping the content in a div:
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>App</title>
<meta name="description" />
</head>
<body>{children}</body>
</html>
)
}
Any insights or suggestions?