[NextJs 14] Router 오류 해결(NextRouter was not mounted)

nextjs 14 에서 router를 사용하기 위해서 

import { useRouter } from "next/router"

을 사용하게 되면 NextRouter was not mounted 라는 오류가 나온다. 

 

해당 기능을 import하면 정상적으로 코드가 작성은 되지만, 처음 마운트 될때 useRouter만 마운트가 안되는 것이다.

처음에는 설정을 잘못한줄 알고 홈페이지를 계속 찾았다. 

홈페이지에서는 이전 버전까지는 next/router 을 사용했지만 13버전 이후 부터는 

import { useRouter } from "next/navigation" 

을 대신 사용하라고 설명하고 있다.  기능이 변경되면서 next/router 폴더의 기능을 삭제한듯 보인다. 

그래서 페이지가 마운트 될때 해당 기능이 마운트 되지 않는것이였다.

 

또한, props를 전달 하기 위해서는 예전에는 useRouter 내에 props를 첨부하는 기능이 있었는데 삭제 되었다.

홈페이지에서는 다음과 같이 설명하고 있다.

1. 앱 라우터를 사용 할때 useRouter 훅은 /router 대신 /navigation을 참조해야한다.

2. pathname는 삭제 되었고 usePathname()로 변경되었다.

3. query 는 삭제 되었고 useSearchParams()로 변경 되었다. 

위 설명에서 보듯이 기능 변경이 있었고 해당 기능에 대한 내용은 홈페이지에서 확인하면 될듯 하다.

 

또한, router 설명의 가장 처음 부분에 Link를 설명하면서 특별한 일이 없다면 Link의 사용을 권장하고 있기 때문에 

단순한 페이지 이동의 경우 Link를 사용하는 것이 좋다고 하니 참고했으면 한다.

 

끝!