I want to get cookies in _app.js in next js but I cant and it always return undefined is there a way to solve this problem also a lot of people are saying you should use getInitialProps but in the documentation, it says it is not recommended

here is my _app.js

import "tailwindcss/tailwind.css";
import Navbar from "../components/Navbar.js"

function MyApp({ Component, pageProps, token }) {
  return (
   <Navbar token={token} />
   <Component {...pageProps} />;
  )
}

export default MyApp;

export const getServerSideProps = ({ req, res }) => {
  return {
    props: {
      token: req.cookies.token,
    },
  };
};

I am trying to access the navbar in _app.js and get the cookie token but it always returns undefined but when I do it elsewhere like index.js it works completely fine