Next JS: getServerSideProps cant get cookie [duplicate]

Question

I want to return two cookies, but only one is returned only token cookie, while key cookie cannot be used

export async function getServerSideProps(ctx) {


 const cookies = ctx.req.headers.cookie;
  const cookie = cookies.split(";");
  const [typeToken, token] = cookie[0].split("=");
  const [typeKey, key] = cookie[1].split("=");

  console.log(token); //Work
  console.log(key); //Work

  return { props: { token, key } };
}

in getServerSide function, it can take the key cookie, but

export default function Index({ token, key }) {
  console.log(token); //work
  console.log(key); //not work

in this function only get token cookie, and cant get key cookie

Answer 1

You can't have a prop named key in React, it will be overridden. Name it to something else and you should be able to access it. Read more at reactjs.org/warnings/special-props.html