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 ponent in _app.js and now i am calling this in every individual page so is there anything else i can do for this

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 ponent in _app.js and now i am calling this in every individual page so is there anything else i can do for this

• javascript
• reactjs
• cookies
• next.js

Share Improve this question Follow edited Nov 24, 2021 at 9:24 Shahab Athar asked Nov 24, 2021 at 7:43 Shahab AtharShahab Athar 12011 gold badge44 silver badges1515 bronze badges 2

• If you click on the button that sets the token cookie then reload the page, do you not see the right value in the h1? – juliomalves Commented Nov 24, 2021 at 8:09
• No i dont see the value of token it returns undefined – Shahab Athar Commented Nov 24, 2021 at 8:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

According to this answer, you can access to your cookies at req.headers.cookie.