트러블슈팅

NextRouter was not mounted.

노엠디엔 2023. 7. 10. 14:36

next.js 강의를 듣다  페이지를 이동시키기 위해 useRouter를 사용하였다

그러다 갑자기 

 error node_modules\next\dist\client\router.js (146:14) @ useRouter
-error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

에러가 발생하였다 일단 강의 해결방법이 게시판에 없어 gpt에게 곧장 물어보았다.

일단 오타확인하고 아니면 다시 설치해 봐 그래도 안되면 캐시 삭제 하라는 건데; 보통 이런 경우는 자기도 모른다는 결론;;

 구글링을 해보니
https://nextjs.org/docs/messages/next-router-not-mounted

https://stackoverflow.com/questions/74421327/nextrouter-was-not-mounted-next-js

https://velog.io/@sumi-0011/Error-Note-NextRouter-was-not-mounted.-%ED%95% B4% EA% B2% B0% ED%95%98% EA% B8% B0

useRouter를 사용하는 페이지가 'use client'로 동작되고 있고 그 안에서는 use Router를 사용할 수 없게 된 것 같다

그래서 useNavigation을 사용해야 한다고 한다.

import { usePathname, useRouter } from 'next/navigation';
 
    const router = useRouter();    

이렇게 작성해 주니 router.push()가 동작한다? 정확한 이유에 대해서는 찾지 못했지만 'use client' 내에서는 
next/navigation 에서 useRouter를 가져와야 하는 것 같았다. 혹시나 해서 gpt에게 물어보았지만

몇 번의 말싸움 끝에 끝내 내가 이겼다. 그냥 상처뿐인 승리였다.