[Next.js] 현재 메뉴 활성화, next/navigation, useRouter

React 에서는 react-router 에서 지원하는 NavLink 를 이용하면 네비게이션에서 현재 메뉴의 상태를 쉽게 특정할 수 있었다.
Next.js (현재 사용버전 14) 에서는 커스텀으로 구현해야 했다.

• 1차 시도 방법: next/router 의 useRouter 를 이용해서 현재페이지의 pathname 을 특정하는 방법
  - 먼저 메뉴 정보에 대한 객체 배열을 만들어 주고

const menuData = [
    { id: "menu01", title: `${userName}`, path: "/member/mypage" },
    { id: "menu02", title: "Login", path: "/member/login" },
    { id: "menu03", title: "Sign up", path: "/member/join" },
];

• path 값과 pathname 을 비교하여 활성화 스타일 적용

const router = useRouter();

{menuData.map((menuItem) => (
    <Link
        href={menuItem.path}
        className={`${menuItem.path === router.pathname ? "active" : ""}`}
    >
        {menuItem.title}
    </Link>
))}

그런데 다음과 같은 에러가 뜬다.
Error: NextRouter was not mounted.
Next.js 13 부터는 next/router 대신 next/navigation 를 사용해야 한다.
이제 useRouter 는 next/navigation 에서 참조하고, pathname 이 usePathname() 으로 query 는 useSearchParams() 로 써야 한다 이런 내용인거 같다.

그래서 코드를 수정하여

// refactor
import { usePathname } from "next/navigation";

const pathname = usePathname();

{menuData.map((menuItem) => (
    <Link
        href={menuItem.path}
        className={`${menuItem.path === pathname ? "active" : ""}`}
    >
        {menuItem.title}
    </Link>
))}

참고 : https://nextjs.org/docs/app/api-reference/functions/use-router