Hydration error on static home page
Unanswered
English Lop posted this in #help-forum
English LopOP
I created a Next app with create-next-app and simply added Clerk Provider to my layout.jsx. When I load localhost:3000, I get hydration error. Here is my code:
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClerkProvider>
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
</ClerkProvider>
);
}
9 Replies
What happens if you move the provider in the body?
Have you tried the
supressHydrationError prop yet
@English Lop have you tried?
English LopOP
Thanks for your reply
I decided to use an open source library
But yes, that solved it
great to hear that!
@English Lop But yes, that solved it
mark solution to close this thread 🙂