[NEXT] router.isReady (router.query가 빈 값일 경우)

[NEXT] router.isReady (router.query가 빈 값일 경우)

• Next.js 에서 router.query에 값을 넘기는데도 빈 값일때 해결방법!

이슈

• localhost:3005?param=”qsdfsdfsdfsdf’

이렇게 보내는데, 자꾸 router.query객체를 확인해보니 빈객체였음

빈객체면 로그인을 못하는데, 자꾸 빈객체가 뜨니 로그인으로 넘어가는 이슈가 생김

이유

• automatic static optimization에 의해 정적으로 최적화된 페이지는 루트 매개변수가 제공되지 않아서 query가 빈객체가 된다고 한다.
• 컴포넌트 밖에 있는 wrapper에서 호출하는 거니까 정적으로 최적화된 페이지인가..?

해결

1. NextJS @10.0.5이후 - isReady 사용

• 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부.
• useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는데에 사용해야한다.

<code></code>

useEffect(() => {
		
		if (mount) {
			resetSignUp()
			if (validateUserInfo()) {
				storeUserInfo()
			} else {
					alert("잘못된 접근입니다.")
					resetUserInfo()
					// ❗❗ [TO DO] 에러페이지로 이동할지 또는 창을 닫을지 정해야함
					router.replace('/error')
			}
		}
     
	}, [router.isReady])