Error: NextRouter was not mounted.

 자주 실수해서 발생시키는 오류 중 하나.

 

import { useRouter } from 'next/router';

export default function NavSection() {
  
  const router = useRouter();

  return (
  	<div onClick={() => {router.push(url);}}>
       url로 이동
    </div>          
  );
}

 

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

`NextRouter` was not mounted

 

처음에 client 컴포넌트 사용을 하지 않아 발생하는 오류인줄 알았으나 'use client'를 적용해도 동일한 오류 발생!

현재 app router를 사용하고 있으므로 

import { useRouter } from 'next/navigation';

에서 훅을 import 해주자