[ NextJS ] router.query에 관하여

[...id].tsx 컴포넌트에서 router.query 안에 object를 사용할때 "Object is possibly 'undefined'" 오류로 인해 작성하게 된 내용입니다.

router.asPath로 주소를 모두 가져올수도 있지만, 모든 내용을 가져오고 싶지 않아서 찾아보게 된 내용입니다.

 

router.isReady

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

useEffect 내부에서만 사용해야 하며 서버의 조건부 렌더링에는 사용할 수 없습니다.

 

그런데 아래처럼 들어오는걸 원하지는 않았습니다. 그것도 Object로...

const { query: { id }, isReady } = useRouter();

useEffect(() => {
    if (!isReady) return;
    console.log(id); // ['home'];
}, [id])

 

아래와 같은 방식으로 query내부에 내용을 가져왔습니다.

const router = useRouter();

useEffect(() => {
    if (router.query["id"] !== undefined) console.log(router.query["id"][0]); // home
}, [])