개발자

Next.js pages router -> app router 전환

2023년 12월 21일조회 142

안녕하세요! 사내에서 app router로의 마이그레이션을 진행하려고 하는데, next/navigation의 변경점이 큰 것 같아요. 기존 useRouter에서 사라진 메소드들이 많아서... 혹시 성공적으로 app router로 전환하신 분들은 이들에 대해 일일히 대처해 주신 걸까요??

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 12월 21일

Next.js의 pages router에서 app router로 전환하는 것은 몇 가지 주요 변경사항을 동반합니다. 먼저, 기존의 `useRouter` 훅과 기타 메소드들이 없어지게 되므로 대체 수단을 찾아야 합니다. 먼저 페이지 이동에는 `<Link />` 컴포넌트 대신 `router.push()`를 사용해야 합니다. 둘에는 약간의 차이가 있습니다. Link 컴포넌트는 컴포넌트를 렌더링하고 그것을 클릭하면 해당 페이지로 이동하게끔 합니다. 반면에 `router.push()`는 프로그래밍 방식으로 라우팅을 제어할 수 있는 방법입니다. 추가적으로, useRouter 훅은 app router에서 사라집니다. 따라서 이전에 useRouter를 사용하여 접근하던 route 객체의 속성들은 다른 방법으로 접근해야 합니다. 이전처럼 현재 URL 경로를 읽거나 변경하기 위해서는 useLocation과 useHistory 훅을 사용할 수 있습니다. 세션 데이터(예: 로그인 정보)는 useContext와 같은 다른 Context API를 활용하여 관리해야 할 것입니다. 경우에 따라서는 일부 쿠키나 localStorage도 사용할 수 있습니다만, 이들은 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)에는 적합하지 않을 수 있습니다. 변경사항들은 애플리케이션의 구조와 특성에 따라 다르게 적용될 수 있으므로, 전체적인 마이그레이션 계획을 세우고 적절한 대체 방법을 찾아 적용하는 것이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!