Next.JS 14 and Shadcn Error: Hydration failed because the initial UI does not match what was rendered on the server

Question

Nextjs14 with Shadcn on a fresh project. I dont know why im getting a hydration error. Ive tried to apply asChild on Trigger, nohydration on Trigger however both did not work out. I would really appreciate your help. Thanks in advance ;)

'use client'


import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuList,
    NavigationMenuTrigger,
  } from "@/components/ui/navigation-menu"
  
export function Navbar() {
  return (
    <>
    <div className="flex justify-center mt-5">
      <img src="/logo.png" className="h-24 w-48 mr-5"/>
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
                Produkte
         </NavigationMenuTrigger>
          <NavigationMenuContent>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger >Direktabschluss</NavigationMenuTrigger>
          <NavigationMenuContent>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger >Leistungen</NavigationMenuTrigger>
          <NavigationMenuContent>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger >Unternehmen</NavigationMenuTrigger>
          <NavigationMenuContent>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger >Rechtliches</NavigationMenuTrigger>
          <NavigationMenuContent>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
    </div>
    </>
  )
}

Answer 1

I did not put the Component correctly in the layout