[Next.js] router.query 값 가져오기

 

 

상세 페이지를 course/[id].tsx로 해놓고 실제로 있는 페이지인 경우 (id로 서버 요청 후 값이 있다면)

페이지를 보여주고, 없는 페이지인 경우 메인으로 redirect처리를 하려고 했다.

 

그런데 useEffect로 router.query.id  받아서 확인해보니 undefined가 뜬다??

기본적으로 router.query.id가 채워져서 나올 줄 알았는데 
useEffect에서 확인해보니 query값이 없다가 이후에 string | string[] 으로 채워진다.

 

 

useEffct로 id 확인하기

const courseId = router.query.id

useEffect(() => {
    if (typeof courseId === 'string') { //처음엔 undefined이기 때문에 string으로 확인
      if (Number.isNaN(courseId)) {
        alert('잘못된 요청입니다.');
        router.push('/');
        return;
      }
      getCourseInfo(courseId);

  }, [courseId]);

더 나은 방법이 있을 수도 있지만 일단 이런식으로 1차적으로 검증을 하고

getCourseInfo에서 서버 요청 시 값이 없을 경우 튕겨주는 식으로 구현했었다.

 

 

serversideProps를 활용하기

export const getServerSideProps = async (context: NextPageContext) => {
  const { id } = context.query;
  const courseId = Number(id);

  if (Number.isNaN(courseId)) {
    return {
      notFound: true
    };
  }

  return {
      props: { courseId: courseId }
  };
};

 

serversideProps를 사용해서 query Id를 바로 얻을 수도 있다.

serversideProps 내부에 서버요청까지 하면 잘못된 페이지에 접근 시 페이지를 보여주기 전에 튕기도록 구현할 수 있다.