Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <p> in <svg>. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[bibekrawat2020]

When I add in Navbar.tsx by following video from youtube and start local server there occurs 3 errors:

        <div className="container max-w-7xl h-full mx-auto flex items-center justify-between gap-2">
            {/* { logo } */}
            <Link href='/' className="flex gap-2 items-center">
                <p className="hidden text-zinc-700 text-sm font-medium md:block">Breadit</p>
            </Link>
        </div>

The error above occurs.

[okieLoki]

well since he used server component for the navbar so you can't use useEffect to solve this issue one way to do that would be taking everything from the navbar and create a new component, pass session over there as a prop and in the old navbar component use useEffect to remove the warning

or you can use supressHydrationError (idk why it's not working for react 18+) 😞