[NextRouter was not mounted] 클라이언트 컴포넌트에서 useRouter() 사용 못 하는 오류

프로젝트 진행 중 클라이언트 컴포넌트에서 useRouter()를 사용하면  NextRouter was not mounted라는 오류가 떴다.

해당 오류는 useRouter() 훅이 서버 사이드에서 호출될 때 발생하는 오류이다.

 

"use client";

import { useRouter } from "next/router";

export default function RecentActivities() {
  const router = useRouter();
  ...
  return (...);
};

내가 작성한 코드를 보면 코드의 상단에 "use client"를 적어주어 클라이언트 컴포넌트로 변경했다.

그렇다면 클라이언트 사이드에서 useRouter()가 호출되었기 때문에 문제가 없어야 하는데 왜 오류가 발생한 걸까?

 

"next/router"가 아니라 "next/navigation"에서 import 해야 한다.

• Next.js 13부터는 App Router를 도입하면서 라우팅 시스템이 변경되었다.
• next/router의 useRouter는 Pages Router용
• next/navigation의 useRouter는 App Router용

 

아무 생각 없이 자동완성 기능을 사용해서 잘못 import 했던 문제였다...

App Router 기능을 사용한다면 "next/navigation"에서 useRouter()를 import 하자.