https://nextjs.org/docs/app/api-reference/functions/cookies

Get it from a server component and pass it as props

Or use any JavaScript libraries to get cookie from the browser you can find

This for example https://github.com/js-cookie/js-cookie

didn't work for me

how did you use it?

npm i js-cookie then import this Cookie from package then use like this Cookies.get('name')

in Navbar Component

Cookies.set("name","value") also not worked

you have to use it inside a useEffect or an event handler

if you use it like this it doesn't work

function Component() {
  const name = Cookie.get("name");
  return <div>{name}</div>;
}

because the component is prerendered on the server

if you don't want to use useEffect or event handlers you need to use headers() in a server component and pass as prop

You can also create a route hanlder o use a server action