[Error Note] "NextRouter was not mounted." 해결하기

문제 발생

평소처럼 페이지 이동을 위해 useRouter을 사용하여 페이지 이동을 하려고 하였는데, 밑과 같은 에러가 발생하였습니다...

Error: NextRouter was not mounted.

next 13 + app directory를 사용하는 것은 처음이라 당황스러웠지만,
이를 찾아보니,
참고링크

next 13에서 app directory를 이용한 경우,
client에서 렌더링 하도록 하려면 "use client" 키워드를 사용해야 합니다.

하지만,
"use client"를 사용하면 useRouter은
NextRouter was not mounted.라는 에러가 발생하며 사용할 수없습니다.

해결방법

대신하여, useNavigation을 사용해야 합니다.
하지만, useNavigation에는 queries/dynamicPaths/paths과 같은 데이터가 존재하지 않아,
query 등의 정보가 필요한 경우에는 usePathname를 같이 사용하면 됩니다.

사용방법은 밑과 같습니다.

'use client';

 // this works in pages directory as well
import { usePathname, useRouter } from 'next/navigation';

const pathname = usePathname();
const router = useRouter();

...

결론

next 13 + app directory + "use client" 키워드를 사용할 때는
'next/router'가 아닌 'next/navigation' 모듈을 이용하자.

etc..

GPT한테 물어봤지만.. 여전히 next 13에 관련된 내용은 모르는 듯 합니다.
무슨 React Native?