[Next.js] 서버 사이드 코드에서 쿼리스트링을 어떻게 가져오는데!

오늘은 회사에서 next.js로 만들어진 페이지의 기능을 추가할 일이 있어서 작업에 착수했다. 

 

주요 골자는 이전 페이지에서 도출된 결과를 다음 페이지로 넘겨주고 그 값에 다른 값들을 입력받아 회원가입을 진행하는 그런 플로우 였다.

 

그래서 당연히 react에서 하듯이 

const router = useRouter();

const {} = router.query;

이렇게 이전 페이지에서 쿼리스트링으로 넘겨준 값을 가져다가 쓰려고 했는데,

 

페이지 이동 전에 해당 값으로 다른 값을 조회해야할 일이 생겼다.

 

그래서

 

export const getServerSideProps(){
 const router = useRouter();
}

이렇게 짜면 되겠지 하고 저장을 딱 하자마자 에러가 났다. 

 

useRouter는 Hook이다. 당연 컴포넌트 안에서 사용해줘야 하는건데 또 생각을 놓고 코딩하려고 한 것이다.

 

getStaticProps, getServerSideProps 등은 이제 서버사이드에서 돌아가는 코드로 쿼리스트링을 사용하려면 props로 들어오는 context를 이용해야한다.

 

export async function getServerSideProps(context) {
  const {} = context.query
  return {
    props: {}
  }
}

 

장마철이라 비에 약한 나라서 요즘 정신이 자주 흐트러지는데, 집중 또 집중해야겠다.