[next.js] getServerSideProps에서 context로 cookie 가져 오기

여러분,

next.js 할 때,

getServerSideProps 쓸 때 context를 매개 변수로 줄 수 있습니다.

 context는 자바스크립트 오브젝트로 되어있고 http request와 http response를 포함한 다양한 정보를 담고 있습니다.

https://nextjs.org/docs/basic-features/data-fetching

Basic Features: Data Fetching | Next.js

공식문서의 getServerSideProps 부분을 보면 자세히 알아볼 수 있습니다.

 

오늘 제가 소개할 것은 context.req.headers.cookie 입니다!

server side에서 client side requset에 포함한 cookie를 얻을 필요가 있을 때!

next.js에서는 이렇게 할 수 있습니다!

export async function getServerSideProps(context) {
  const cookie = context.req ? context.req.headers.cookie : "";
  ...
  ...
}

이러면 변수 cookie에 모든 cookie 정보가 저장되어 있습니다.

무려 한 줄로 말이지요

한 줄의 문자열로 말이지요

그렇습니다. 알아서 쪼개서 써야합니다. 이상하지요?

저도 왜 그런건지 모르겠습니다.

그래서 잘 쪼개야 합니다.

"cookie01=abcdefghij; cookie02=klmnop"

이런 식으로 이루어진 문자열이더라고요?

아래는 쪼개는 함수 입니다.

const cookieStringToObject = (cookieString) => {
  if (!cookieString) {
    return "";
  } else {
  
    cookieString = cookieString.split("; ");
    let result = {};
    
    for (var i = 0; i < cookieString.length; i++) {
      var cur = cookieString[i].split("=");
      result[cur[0]] = cur[1];
    }
    return result;
  }
};
//cookieString이 객체에 있는 데이터를 쓰듯이 쓸 수 있게 되었습니다.

이러면 아무튼 쿠키를 꺼내 쓸 수 있습니다!

---