next-router-non-mounted 에러 처리

이번에 흑집소랑 마와셀 웹 서비스를 개발하면서 Next.Js 14를 쓰게 되었다.

근데 기존 12버전에서 쓰던 코드 일부를 붙여서 사용하던 도중 에러가 발생하였다.

Unhandled Runtime Error.

NextRouter was not mounted.

왜 그런거 찾아보니 Router 사용법이 조금 변했다.

그리고 전과는 다르게 13이후 부터는 기본이 Server Component가 기본이라 클라이언트로 사용하려면 상단에 "use client"를 명시해야 한다.

근데 client를 명시해도 not mount 에러가 발생한다.

이 경우 아래와 같이 import를 바꿔주면 된다.

"use client"

//구형
//import {useRouter} from "next/router";

//신형 (13 이후)
import { usePathname, useRouter } from 'next/navigation';


{
const router = useRouter();
const pathname = usePathname();
}

이렇게 사용하면 된다.