Hydration error on creating a new layout.tsx
Answered
Anay-208 | Ping on replies posted this in #help-forum
Once I create a new layout.tsx, I keep getting tons of hydration Error
Answered by Eric Burel
Use route groups to isolate the one with a different layout, or use a client component to detect the current routes
16 Replies
Here is layout.tsx:
import type { Metadata } from "next";
import "@/app/globals.css";
import Footer from "@/components/footer";
import { Toaster } from "react-hot-toast";
import fonts from "@/fonts/fonts";
import { cn } from "@/lib/utils";
export const runtime = "edge"
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={cn(
"min-h-screen bg-background font-sans antialiased",
fonts.map((font) => font.variable).join(" ")
)}>
{/* only navbar is removed */}
<Toaster />
{children}
<Footer />
</body>
</html>
);
}I get errors like
Warning: Expected server HTML to contain a matching <main> in <body>.Error: Hydration failed because the initial UI does not match what was rendered on the server.and for my home route, Styles stop rendering until I restart app, but after some time, same thing happens
What I'm trying to do is remove navbar for a specific route(/cart), like on first step of form, I want the navbar and on second step of form, I don't want it
Is your Toaster component working with SSR?
It's an old project so maybe it doesn't
First you'll want to remove each component and see what happens
you may want to compare the HTML result in the netwrok tab (first request) and what your have in the elements tab (rendered client-side)
Here are some strategies to handle hydration errors for components taht do not support server rendering
https://medium.com/@eric.burel/how-to-get-rid-of-window-is-not-defined-and-hydration-mismatch-errors-in-next-js-567cc51b4a17
https://medium.com/@eric.burel/how-to-get-rid-of-window-is-not-defined-and-hydration-mismatch-errors-in-next-js-567cc51b4a17
@Anay-208 | Ping on replies Here is layout.tsx:
tsx
import type { Metadata } from "next";
import "@/app/globals.css";
import Footer from "@/components/footer";
import { Toaster } from "react-hot-toast";
import fonts from "@/fonts/fonts";
import { cn } from "@/lib/utils";
export const runtime = "edge"
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={cn(
"min-h-screen bg-background font-sans antialiased",
fonts.map((font) => font.variable).join(" ")
)}>
{/* only navbar is removed */}
<Toaster />
{children}
<Footer />
</body>
</html>
);
}
that's because the home layout still wraps around your other layouts and you can only have one
simply get rid of the unwanted
html and body tag in your app.simply get rid of the unwanted
html and body tags in all your other layoutsGot it, So I want to remove
Navbar from 1 route. How can I do that?@Anay-208 | Ping on replies Got it, So I want to remove `Navbar` from 1 route. How can I do that?
Use route groups to isolate the one with a different layout, or use a client component to detect the current routes
Answer
@Eric Burel Use route groups to isolate the one with a different layout, or use a client component to detect the current routes
So, i can create 2 folders,
app/(navbar)
app/(noNavbar)
Am i right?
app/(navbar)
app/(noNavbar)
Am i right?
Alright, thanks!