Hydration failed?
Answered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
this is my structure and i dont even have anything in the page tsx, why am i getting the error?
17 Replies
Saltwater CrocodileOP
the dashboard layout is default:
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<body>
{children}
</body>
);
}Saltwater CrocodileOP
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { Navbar } from "@/components/myedu/navbar";
import DefaultFooter from "@/components/myedu/default-footer";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<DefaultFooter />
</ThemeProvider>
</body>
</html>
);
}@Saltwater Crocodile tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { Navbar } from "@/components/myedu/navbar";
import DefaultFooter from "@/components/myedu/default-footer";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<DefaultFooter />
</ThemeProvider>
</body>
</html>
);
}
The problem is, that you have two layouts stacking and both have a body tag. So two layouts are ok, but not two body’s. Because of that there are hydration errors
@B33fb0n3 The problem is, that you have two layouts stacking and both have a body tag. So two layouts are ok, but not two body’s. Because of that there are hydration errors
Saltwater CrocodileOP
so do i use regular div instead
also, how can i make the /dashboard layout default in /dashboard** instead of the root layout?
Either div, or remove it from one or or or. You can do many things, but not two body’s 😅
Saltwater CrocodileOP
you said that in /dashboard it would be stacking right?
i want it to use only the /dashboard layout and not the root as well
so it wont be stacking
You can use route groups, to either define multiple root layout or to just group your routes: https://nextjs.org/docs/app/building-your-application/routing/route-groups
It seems like you want to define multiple root layouts
Answer
solved? @Saltwater Crocodile