Help wanted, hydration error on root layout
I'm getting this hydration error on the root layout in the body tag, I'm not sure why tbh
// src/app/layout.tsx
import "~/styles/globals.css";
import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";
import NavBar from "./_components/NavBar";
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const geist = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`}>
<body>
<div className="min-h-screen bg-gray-100">
<NavBar />
<main className="lg:ml-64">
<div className="container mx-auto px-4 py-6">
<TRPCReactProvider>{children}</TRPCReactProvider>
</div>
</main>
</div>
</body>
</html>
);
}// src/app/layout.tsx
import "~/styles/globals.css";
import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";
import NavBar from "./_components/NavBar";
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const geist = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`}>
<body>
<div className="min-h-screen bg-gray-100">
<NavBar />
<main className="lg:ml-64">
<div className="container mx-auto px-4 py-6">
<TRPCReactProvider>{children}</TRPCReactProvider>
</div>
</main>
</div>
</body>
</html>
);
}
