#3. useRouter() from next/router vs. next/navigation

 오류 발생 상황 

useRouter() 입력 시 자동완성으로 뜨는 import 가능 패키지 중 가장 상단의 next/router로부터의 패키지를 선택하였더니 아래와 같은 오류가 발생했다.

 

자동완성으로 뜨는 두 가지 import 가능한 패키지

1. next/router

2. next/navigation

---

 오류 발생 원인 

두 패키지 간 차이에 의해 오류가 발생한 것

 

공통점

- 두 패키지 모두 라우팅에 관련된 기능을 제공

 

차이점

next/router

- 더 이전에 나온 라우팅 관련 패키지로, 기본적인 라우팅 작업을 위해 만들어진 좀 더 가벼운 패키지이다.

- 라우팅을 pages 폴더 기반으로 하던 next.js 13버전 이전에서 사용했던 패키지이다.

 

next/navigation

- 라우팅을 app 폴더 기반으로 하는 next.js 13버전이 도입된 후 사용되기 시작한 패키지이다.

- 라우팅 관련 패키지로, 다양한 고급 기능들을 제공한다.

- next/navigation이 제공하는 기능: App router, Link, useRouter,...

---

 오류 해결 방법 

가장 최신 버전인 15.1.0의 next.js를 사용하고 있기 때문에,

useRouter()를 next/navigation 패키지로부터 import 해와서 사용함으로써 오류 해결!

 

결론

next.js 13버전 이상은 next/navigation의 useRouter()을 사용하는 것이 권장된다!

스택오버플로우 댓글에 따르면 app 폴더 기반의 라우팅 방식을 사용하는 경우,

next/router의 useRouter()은 사용할 수 없다고 한다.