i am working with next js and trying to get a cookie value and this is my code:

import cookie from "js-cookie";

export default function Home({ token }) {
  return (
    <div className="flex flex-col items-center bg-reddit-dark py-2 text-white">
      {/* setting cookie */}
      <button
        onClick={() => {
          cookie.set("token", "ABCD");
        }}
      >
        login
      </button>
      {/* removing cookie */}
      <button
        onClick={() => {
          cookie.remove("token");
        }}
      >
        logout
      </button>
      <h1>token: {token}</h1>
    </div>
  );
}

export const getServerSideProps = async ({ req, res }) => {
  const res = await fetch(`http://localhost:5000/api/posts/`);

  const posts = await res.json();

  return {
    props: {
      token: req.cookies.token,
      posts,
    },
  };
};

so i can get and remove a cookie fine but when i try to get the value of the cookie using the getServerSideProps() function it returns undefined and i have cleared cookies from my browser but still did not work i have looked at countless solutions and copied it but it did not work either.

Update i was calling this component in _app.js and now i am calling this in every individual page so is there anything else i can do for this