Nextjs에서는 페이지 이동할 때 다음과 같은 방법을 사용할 수 있다.

• <Link> 컴포넌트
• useRouter훅 (클라이언트 컴포넌트)
• redirect함수 (서버 컴포넌트)
• 브라우저 네이티브 API

Link 컴포넌트

Link 컴포넌트는 서버 컴포넌트에서 사용할 수 있으며 a 태그를 확장하여 경로간 prefetch 및 client-side 네비게이션을 제공하는 컴포넌트이다. Nextjs에서 경로 간의 이동에서 기본적이고 권장되는 방법이다.

Link 컴포넌트에서 prefetch란?

prefetching은 Link 컴포넌트가 사용자의 뷰포트에 들어올때(처음에 또는 스크롤을 통해) 발생한다. Nextjs는 client-side 탐색의 성능을 향상시키기 위해 링크된 경로와 해당 데이터를 백그라운드에서 prefetch하고 로드한다. 사용자가 Link 컴포넌트를 마우스로 가리킬 때 프리페칭된 데이터가 만료된 경우 Nextjs는 다시 프리페칭을 시도한다. 이는 프로덕션 환경에서만 활성화된다.

useRouter() hook

useRouter 훅은 클라이언트 컴포넌트에서 경로를 변경할 수 있다.