NextJS | useRouter() params undefined issue

문제 발생

출석 이벤트 페이지에서 URL의 params의 date 값을 기반으로 해당 날짜의 이벤트 페이지를 렌더링 하고 있다.
만약 date 값이 지금 진행하는 이벤트의 날짜와 일치하지 않는다면 진행중인 이벤트가 아닙니다. 라는 경고를 띄우고 페이지 접근을 제한한다.
하지만 정상적인 date 값으로 페이지에 접근했음에도 일시적으로 경고가 노출된 후 페이지에 접근하는 이슈가 발생했다.

원인 분석

이는 NextJS의 useRouter() 를 사용해 얻은 router 객체의 작동 방식에 원인이 있었다.

공식 문서에서 How it works 일부를 발최하면 다음과 같다.

During prerendering, the router's query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

즉, 렌더링 이전에 router 쿼리 객체가 비어있게 되고, hydration이 끝난 후 Next.js 가 route parameters 를 쿼리 객체에 제공하게 된다는 뜻이다.

따라서 일시적으로 router 쿼리가 비어서 date 파라미터가 undefined 가 되어 경고 창이 뜨고, hydration이 끝난 뒤에는 date 파라미터가 정상적인 값으로 채워지기 때문에 경고 창이 사라지고 정상 렌더링 되었던 것이다.

해결 방법

NextJS router query params 가 초기에 undefined 인 이슈에 대한 글을 참고하여 이 이슈를 해결했다.

router.isReady 를 사용해서 isReady 가 true가 되면 그 때 params 를 사용하도록 로직을 수정했다. 이렇게 하면 hydration 이후에 채워진 router 객체를 사용할 수 있다.

import { useRouter } from 'next/router';
import React from 'react';

const Test = () => {
  const router = useRouter();
  React.useEffect(() => {
    if (router.isReady) {
      // Code using query
      console.log(router.query);
    }
  }, [router.isReady]);
  return <div>Hello World</div>;
};

export default Test;