[Next.js] router.query undefined일 경우

문제

next.js 환경에서 useEffect(()=>{},[])로 첫 마운트될 때 router.query 값을 받아오는데 undefinded를 뱉어냈다(분명 값이 있음)

export default function App() {
   const router = useRouter();
   const key = router.query;

   useEffect(() => {
      console.log(key)	// undefinded
   }, [])

  return (
     <div>
        {key}
     </div>
   )
}

이유

정적파일 최적화로 인해 랜더링 전 준비시간 동안 라우터 객체의 쿼리는 비어 있고 이 찰나의 순간 때문에 router는 빈 객체이고 업데이트 된 후에 우리가 원하는 동작을 실행하는 것..!

정적파일 최적화 공식문서

해결방안

next 10.0.05 이후 : isReady 사용

router. isReady

라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부.

useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사용해야 한다.

export default function App() {
   const router = useRouter();
   const key = router.query;

   useEffect(() => {
    if(!router.isReady) return;
      console.log(key)	// 원하는 key 값이 나온다!
   }, [router.isReady])

  return (
     <div>
        {key}
     </div>
   )
}