I'm facing an issue with hydration in Next.JS 14, where there is a discrepancy between the server-side rendered UI and the client-side rendering. I have a suspicion that this problem may stem from using new Date(), which could be producing different values on the server and client. How can I tackle this challenge while ensuring it remains integrated into my layout page?
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<footer>
<p>Page Rendered on - </p>
{new Date().toLocaleDateString()}
</footer>
</html>
);
}