Next.js Discord

Discord Forum

Hydration failed error [beginner]

Unanswered
Kenspectacle posted this in #help-forum
Open in Discord
KenspectacleOP
hi guys, im currently creating a project and for some reason I got this error
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

this is the error log
  ...
    <Layout>
      <html lang="en" suppressHydrationWarning={true}>
        <body>
          <Navbar>
            <NavigationMenu className="w-full" suppressHydrationWarning={true}>
              <NavigationMenu data-slot="navigation..." data-viewport={true} className="group/navi..." ...>
                <NavigationMenuProvider scope={undefined} isRootMenu={true} value="" dir="ltr" orientation="horizontal" ...>
                  <NavigationMenuProvider scope={undefined} isRootMenu={true} rootNavigationMenu={null} value="" ...>
                    <NavigationMenuCollectionProvider scope={undefined}>
                      <NavigationMenuCollectionProviderProvider scope={undefined} itemMap={Map} ...>
                        <NavigationMenuProvider scope={undefined} items={Map}>
                          <Primitive.nav aria-label="Main" data-orientation="horizontal" dir="ltr" ...>
+                           <nav
+                             aria-label="Main"
+                             data-orientation="horizontal"
+                             dir="ltr"
+                             data-slot="navigation-menu"
+                             data-viewport={true}
+                             className="group/navigation-menu relative flex flex-1 items-center justify-center w-full"
+                             suppressHydrationWarning={true}
+                             ref={function}
+                           >
-                           <div id="__next">

30 Replies

KenspectacleOP
this is my current app/layout.tsx file
import Navbar from '../components/ui/navbar'
 
export default function Layout({ children }) {
  return (
    // <>
    //   <main>{children}</main>
    // </>
    <html lang="en" suppressHydrationWarning>
    <body>
      <Navbar />
      {/* Layout UI */}
      {/* Place children where you want to render a page or nested layout */}
      <main>{children}</main>
    </body>
  </html>
  )
}
and the navbar component
import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuIndicator,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
    NavigationMenuViewport,
    navigationMenuTriggerStyle
} from "@/components/ui/navigation-menu"

import Link from "next/link"

export default function Navbar() {
    return (
        <NavigationMenu className="w-full" suppressHydrationWarning>
            <div className="flex justify-start w-1/3">
                <ul>
                <NavigationMenuItem>
                        <Link href="/" legacyBehavior passHref>
                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                                Home
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                </ul>

            </div>
            <div className="flex justify-end w-2/3">
                <ul>
                    <NavigationMenuItem>
                        <Link href="/Login" legacyBehavior passHref>
                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                                Login
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                </ul>

            </div>
        </NavigationMenu>
    )
}
so what am I doing here wrong?
im using shadcn/ui if that is relevant
joulev
do you have a pages folder by any chance?
KenspectacleOP
yuuup
joulev
do you have anything in there?
KenspectacleOP
currently my project structure is
- app
-- layout
- components
-- navbar
- pages
-- index.tsx
-- _app.tsx
-- login.tsx
btw this is my first time posting here, I hope im describing my problem well 😦
I have tried adding in suppressHydrationWarning or "use client" on my layout.tsx but nothing worked
@Kenspectacle currently my project structure is - app -- layout - components -- navbar - pages -- index.tsx -- _app.tsx -- login.tsx
joulev
hmm which router do you want to use? if you use the app router then write your page code in the app router as well. if you use the pages router, app/layout.tsx has no effect there so you need to put the navbar in pages/_app.tsx instead
KenspectacleOP
ummm very newbie question but, what do you mean by which router I want to use?
is it not only one type of routing system in next js?
joulev
yes there are two routing systems under app and under pages, they are independent and separate systems
you can use both or either of them but they'll be entirely separate, app/layout.tsx doesn't have any effect on pages/anything.tsx
KenspectacleOP
and by routing, you mean how it works in the browser routes like localhost:3000/login right?
joulev
yes
app router would be app/login/page.tsx
KenspectacleOP
the navbar shouldn't be a component?
joulev
uh i think you should try the learn course https://nextjs.org/learn
KenspectacleOP
okay will do, thanks 🥲
I just thought that it'd be better to learn on the way directly in a project
should I learn the course first or just keep going with the project?
joulev
hmm the reason i sent you the learn course is because from your questions, i know you havent fully understood the basics yet, so whatever i say will be confusing to you. you can use the course which is basically a project, you can also read https://nextjs.org/docs/app/getting-started if you think you can understand things faster
KenspectacleOP
alright I'll try to go through the course first, hopefully it won't be too long
thanks a lot anyways!
joulev
it'll guide you to a full stack app but you shouldnt need to finish it all to understand the basic, i think the first few chapters should be enough to get going
KenspectacleOP
alright sounds good