[Next.js] router.query가 빈값일때! ( with.useEffect )

 

오늘의 문제는 Next에서 useEffect내에서
router.query를 console에 찍어봤는데 자꾸 빈 배열이 반환되는 경우!

 

화면에는 제대로 나오는데 console에 찍어보면 자꾸 빈 객체가 보이는 문제였다..

 

// ❌  ❌  ❌  ❌  ❌
export default function App() {
   const router = useRouter();
   const queries = router.query;

   useEffect(() => {
      console.log(queries,'{} 빈 객체가 찍힘')
   }, [])

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

 

Why? 

정적 파일 최적화(Automatic Static Optimization)에 의해 정적으로 최적화된 페이지는
루트 매개 변수가 제공되지 않아서, query는 빈 객체가 된다고 한다... (?)

 

 

solution

1. NextJS@10.0.5이후  - isReady사용

router. isReady

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

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

// use router.isReady
export default function App() {
   const router = useRouter();
   const queries = router.query;

   useEffect(() => {
      if(!router.isReady) return;
      console.log(queries,'🙆‍♀️ 콘솔에 쿼리 찍힘!')
   }, [router.isReady])

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

 

2. NextJS@10.0.5 이전  - URLSearchParams사용

URLSearchParams

url의 쿼리 파라미터들을 읽거나 수정할때 사용

// use router.isReady
export default function App() {
    useEffect(() => {
      const urlSearchParams = new URLSearchParams(window.location.search)   
         // window.location.search(= query)를 URLSearchParams 객체로 변환
         // ex ) 'www.url.com?page=5'일경우 
         //      '?page=5'가 window.location.search에 해당
    const query = urlSearchParams.get('page')
         // urlSearchParams.get('가져올 query key')
         // 위 예제를 사용할 경우 urlSearchParams.get('page') => 5 가 반환
    console.log(query,'🙆‍♀️쿼리의 page의 값이 출력!!')
     }, [])
    .
    .
    .
}

 

 

  참고 ( next window is not defined )
  URLSearchParams는 useEffect내에서만 사용해야 하는데,
  next는 server-side에서 먼저 실행 되고, 그 후에 client-side에서 실행된다. 
  window는 client-side에만 존재한다.
  고로 React Component내에서 window를 사용하고 싶다면 useEffect내에 코드를 작성해야한다​

 

 

결국 router.isReady를 사용해 해결했다 👍

 

---

✔️ 참고

https://leeyoongti.medium.com/fix-nextjs-router-query-not-working-in-useeffect-a2d9d0ac4703

Fix NextJS Router Query Not Working in useEffect

https://velog.io/@kimhyo_0218/Next.js-Routes-basic-%EB%9D%BC%EC%9A%B0%ED%8C%85

https://sumini.dev/issue/000-nextjs-window,document-is-not-defined/​