Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - Routing Hooks

 

Migrating Routing Hooks

app router에서는 기존 next/router대신 next/navigation의 useRouter(), usePathname(), useSearchParams()를 사용한다.

만약 app 디렉토리에서 기존 next/router을 임포트할 경우 다음과 같은 에러가 발생할 수 있다.

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

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

 

useRouter import 후 콘솔창에 또 다른 메시지가 발생했다.

Warning: Extra attributes from the server: style

 

해당 에러 관련해서는 다음 게시글에 작성했다.

https://jha-memo.tistory.com/96

Warning: Extra attributes from the server: style

 

 

모든 에러가 해결되고 코드 동작을 테스트 해보는데, 

router.push를 사용하는 곳에서 에러가 발생했다.

Access to fetch at 'https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=zZx9111cBSAFaIseEk6Os&redirect_uri=http://localhost:3000//login/naverLoginProcess&state=test' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

 

기존 pages 라우터에서는 정상 작동하던 코드였는데, 아직까지도 왜 에러가 발생했는지 모르겠다.

이것도 베타버전인 app 라우터의 버그인가?

 

일단 공식문서에 다음과 같이 나와있어서 useRouter대신 Link를 사용했는데 에러 없이 정상 작동하였다.

 

Recommendation: Use the <Link> component 
for navigation unless you have a specific requirement for using useRouter.

https://beta.nextjs.org/docs/api-reference/use-router

Client Component Hooks: useRouter | Next.js