[Next.js] Error: NextRouter was not mounted 오류 해결

📜 오류 발생

 

App Router 형식으로 되어있는 프로젝트에서 useRouter를 사용하는 도중에 아래와 같은 오류가 발생하였다.

 

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

 

 

에러 메세지에 달려있는 공식문서 링크를 확인해보니 App Router를 사용중이라면 next/navigation 를 통해 import를 하면 된다고 안내하고있다. 오류가 난 시점에는 next/router 로 import 중이었기 때문에 오류가 나는 문제는 해결되었다.

If used in the app directory, migrate to the new hooks imported from next/navigation.

 

 

다만 나는 네비바에서 현재 위치한 페이지를 활성화 시켜서 보여주기 위해 현재 페이지 경로값이 필요했는데 next/navigation 로 불러온 useRouter에서는 현재 경로값을 찾기 어려웠다.

 

 

그래서 공식문서를 더 찾아보니 next/navigation 에서 usePathname으로 경로값을 받아와서 링크 활성상태를 비교하는것을 권장하고 있었다.

 

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

Routing: Linking and Navigating | Next.js

 

 

 

'use client'
import Link from "next/link";
import { usePathname } from 'next/navigation';
// import linkData from ...;

const Sidebar = () => {
  const pathName = usePathname();

  return (
    <nav>
      {linkData.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={pathName === link.href ? "active" : "common"}
          >
            {link.label}
          </Link>
      ))}
    </nav>
  );
};

export default Sidebar;

 

usePathname을 사용하여, 현재 페이지 경로값과 일치하는 Link 태그에 활성화 표시를 할 수 있게 되었다.