how to get cookies in next js

Question

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

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, Nov 24 '21 at 08:09

score 0 · Answer 1 · answered Nov 24 '21 at 08:26

0

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

answered Nov 24 '21 at 08:26

zimmerbimmer

908
7
24

1

[`req.cookies`](https://nextjs.org/docs/basic-features/data-fetching#provided-req-middleware-in-getserversideprops) is also a valid way of accessing cookies in `getServerSideProps`. – juliomalves Nov 24 '21 at 20:23

how to get cookies in next js

1 Answers1