Next.js 로 웹 개발을 할때면 수 많은 페이지의 링크 이동을 구현 하게 되는데, 페이지 이동을 다음과 같이 크게 3가지의 방식으로 구현할 수 있다.
// 1. next/link의 Link 컴포넌트를 이용
<Link href="/home">HOME</Link>
// 2. router.push() 를 이용
<button onClick={() => router.push("/home")}>HOME</button>
// 3. a 태그를 이용
<a href="/home">HOME</a>1. next/link의 Link 컴포넌트
// 구현 코드
<Link href="/home">HOME</Link>
// 빌드 결과
<a href="/home">HOME</a>- 빌드 후, a tag로 자동 변환된다.
- a tag 의 장점을 갖는다. (SEO 최적화, prefetch 가능, 우클릭 기능 사용 가능 등)
- 페이지 렌더링 시점에, 이동할 주소가 정해져 있는 경우 사용
- 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.
2. router.push()
- 빌드 후, 이동할 주소가 html 상에 노출되지 않기 때문에 SEO에 취약하다.
- SEO가 필요 없거나, 되면 안되거나, 숨겨야 할때 사용
- 페이지 렌더링 시점에, 이동할 주소가 정해져 있지 않은 경우 사용 (ex. 비동기로 클릭 시점에 이동할 주소가 정해지는 경우 등)
- 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.
3. a 태그
- html 전체가 relaod 되기 때문에, 외부 링크 일때 사용하며, 일반적으로 내부 링크 이동시에는 의도한 경우가 아니고서는 사용을 지양하는 것이 좋다.
참고
Next.js 13 부터 다음과 같이 Link 사용 시, child에 a tag 를 사용할 필요가 없어졌다.
The next/link child can no longer be
<a>. Add the legacyBehavior prop to use the legacy behavior or remove the<a>to upgrade. A codemod is available to automatically upgrade your code.
// Next.js 13 미만
<Link href="/home"><a>HOME</a></Link>
//Next.js 13 이상
<Link href="/home">HOME</Link>
Web FE Developer