Nextjs useEffect안의 router query가 빈값으로 나올 때

 

 

기존 로직

 

 

localStorage는 저장, 변경, 삭제 등 모든 동작이 동기적으로 실행된다.

URL의 쿼리스트링으로 존재하는 code를 nextjs의 router.query 를 객체구조분해를 이용하여 가져왔다

이후 useEffect가 실행될 때 쿼리스트링의 code 키,값을 가져와서 localStorage에 저장하려는 의도였다

 

예상과 달리, localStorage에 값이 들어가지 않아 useEffect안에 router.query를 콘솔로 찍어보니

빈 객체 { } 가 출력되었다

 

이는 nextjs에서 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아 query값을 콘솔에 찍어도

빈 객체로 나오기 때문이었다 (= 정적 파일 최적화)

 

 

 

Next.js@10.0.5 이후 버전

router.isReady

라우터 필드가 클라이언트 쪽에서 업데이트되어 사용할 준비가 되어있는지를 확인 가능하며

이는 useEffect hook 내부에서만 사용해야 한다

 

isReady 사용예시

 

 

Next.js@10.0.5 이전 버전

URLSearchParams + window.location.search

window는 서버사이드가 아닌 클라이언트사이드에서 동작하기 때문에

useEffect 내에서 호출해야 한다.

 

URLSearchParams 사용예시

 

 

 

 

 

 

 

Ref.

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

Fix NextJS Router Query Not Working in useEffect

https://nextjs.org/docs/api-reference/next/router