title: how to get cookies in next js
body: <p>i am working with next js and trying to get a cookie value and this is my code:</p>
  <pre><code>import cookie from &quot;js-cookie&quot;;
  
  export default function Home({ token }) {
    return (
      &lt;div className=&quot;flex flex-col items-center bg-reddit-dark py-2 text-white&quot;&gt;
        {/* setting cookie */}
        &lt;button
          onClick={() =&gt; {
            cookie.set(&quot;token&quot;, &quot;ABCD&quot;);
          }}
        &gt;
          login
        &lt;/button&gt;
        {/* removing cookie */}
        &lt;button
          onClick={() =&gt; {
            cookie.remove(&quot;token&quot;);
          }}
        &gt;
          logout
        &lt;/button&gt;
        &lt;h1&gt;token: {token}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export const getServerSideProps = async ({ req, res }) =&gt; {
    const res = await fetch(`http://localhost:5000/api/posts/`);
  
    const posts = await res.json();
  
    return {
      props: {
        token: req.cookies.token,
        posts,
      },
    };
  };
  
  </code></pre>
  <p>so i can get and remove a cookie fine but when i try to get the value of the cookie using the <code>getServerSideProps()</code> 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.</p>
  <p><strong>Update</strong> 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</p>