개발자
next.js에서 페이지 이동할 때 Link 컴포넌트 vs useRouter의 push 메서드 중 어떤 걸 사용해야 할까요?
외부 링크로 이동해야 한다면 Link 태그가 적합한 거 같은데 제품 내 다른 페이지로 이동해야 한다면 push 메서드를 사용하는 게 적합할까요? 감사합니다.
답변 3
인기 답변
Link 컴포넌트는 오히려 같은 제품 내 다른 페이지로 이동하기 위한 목적으로 만들어진 컴포넌트입니다. Next.js 구버전에서는 외부 링크를 <a> 태그로 무조건 처리했었지만, 현재는 Link 컴포넌트가 외부 링크도 지원합니다. 따라서 Link 컴포넌트의 사용 기준은 외부 링크/내부 링크와는 상관이 없으며, 마크업으로 이동이 가능한 부분은 <Link /> 컴포넌트를 우선적으로 활용하시는 게 좋습니다. useRouter의 push 메소드는 Link 컴포넌트로 커버할 수 없는 프로그래밍 영역에서 사용하기 위한 목적이 큽니다. 예를 들어 onSubmit에서 form을 제출하고 특정 페이지로 이동해야 하는 상황에 사용하시면 됩니다.
같은 질문에 답변한 적이 있어서 링크로 남깁니다. 도움이 되면 좋겠네요:) https://careerly.co.kr/qnas/1157?fa=search-result
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
비슷한 질문 1
Q. Router.push vs next/link 어떤 케이스에서 나누시나요?
안녕하세요! 처음 질문 올려봅니다. next.js에서 router.push와 next/link로 페이지를 이동할 수 있는데 차이가 있을까요? 페이지는 이동하지만 새로고침하고 싶지 않을 때 주로 사용하는데, 둘 다 사용해보니 같은 동작을 하는 것 같아서요. 제가 생각한게 맞을까요?
Next/Link를 사용하면 <a> 태그를 생성합니다 (모든 케이스는 아님). 따라서 Router.push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있습니다. 커리어리 사이트에서 오른쪽 상단 프로필을 클릭하면 프로필로 이동합니다. 하지만 우클릭을 했을 경우 클릭에 관한 이벤트는 나타나지 않습니다. 반면, 헤더에 있는 개발자 Q&A 버튼을 누르면 Q&A 리스트로 이동하고, 우클릭을 하면 '새탭으로 열기'등 링크와 관련된 동작을 할 수 있습니다. 이렇게 직관적인 '이동'의 동작을 나타내는 것은 Next.js에서 2가지 장점이 있습니다. 1) SEO에 좋다. 자바스크립트가 활성화 되지 않아도 a 태그로 된 링크는 크롤링 봇이 이동할 수 있고 링크를 인식할 수 있어서 SEO에 좋습니다. 2) data prefetch가능 Next/link 태그가 사용자의 화면 (뷰포트)에 보이면 해당 페이지의 번들파일을 서버에 요청하여 prefetch합니다. 미리 가져온 번들을 통해 페이지 이동을 빠르게 할 수 있습니다. 결과적으로 Router.push, next/link 둘 다 페이지 이동을 수행하지만 웬만하면 Next/link를 사용하는 것을 추천드립니다.
이 질문 바로 가기
지금 가입하면 모든 질문의 답변을 볼 수 있어요!