오류 발생! 그러나 극복(!) 5

useRouter를 이용해서 인스타로고 버튼을 누르면 new라는 페이지로 이동하려 했는데 이런 오류가 발생하였다.

 

 

 

 

이에 대해 잘 몰라 찾아보니,

 

typescript - NextRouter was not mounted Next.JS - Stack Overflow

NextRouter was not mounted Next.JS

 

next 13에서 app directory를 이용한 경우,
client에서 렌더링 하도록 하려면 "use client" 키워드를 사용해야 한다..

그렇지만, "use client"를 사용하면 useRouter은
NextRouter was not mounted.라는 에러가 발생하여 사용할 수 없게 된다고,,,,,

 

참고로 next 13은 작년 2022년 10월에 나왔으며 아래의 next 링크 주소를 들어가면 추가 기능이 정리되어있다.

 

Next.js 13 | Next.js (nextjs.org)

Next.js 13

 

 

 

그래서, 대신 useNavigation을 사용해야 하는데,  useNavigation에는 queries/dynamicPaths/paths과 같은 데이터가 존재하지 않기 때문에 query 등의 정보가 필요한 경우에는 usePathname를 같이 사용해야 한다.

 

아래처럼 코드를 바꾸어주니 오류는 해결되었다.

 

import { usePathname, useRouter } from 'next/navigation';

 

  const pathname = usePathname();

  const router = useRouter();

 

 

다음번에도 이런 오류가 생기면 이 글을 참고하고 되새기면서 오류를 해결해보자.

이번 이 오류는 주변 사람의 도움없이 혼자 해결한 오류이다.. 매번 해매서 조언을 구했는데 처음이었다...

앞으로도 오류를 해결해나가고 그러는데에 방법을 터득해서 처음보는 오류더라도 금방 해결할 수 있도록 해야지

아자아자,,, 짧은 시간이지만 조금씩 나아지고 성장해나가는 내 모습이 보인다.

포기하지말고 천천히 실력을 쌓아가자!