[Next.js] 'Link', 'router.push()', 'a' tag 알고쓰자

 

Next.js 로 웹 개발을 할때면 수 많은 페이지의 링크 이동을 구현 하게 되는데,

페이지 이동을 다음과 같이 크게 3가지의 방식으로 구현할 수 있다.

 

1. next/link의 Link 컴포넌트

// 3. a 태그를 이용

<a href="/home">HOME</a>

 

• 빌드 후, a tag로 자동 변환된다.
• a tag 의 장점을 갖는다. (SEO 최적화, prefetch 가능, 우클릭 기능 사용 가능 등)
• 페이지 렌더링 시점에, 이동할 주소가 정해져 있는 경우 사용
• 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.

2. router.push()

// 2. router.push() 를 이용

<button onClick={() => router.push("/home")}>HOME</button>

• 빌드 후, 이동할 주소가 html 상에 노출되지 않기 때문에 SEO에 취약하다.
• SEO가 필요 없거나, 되면 안되거나, 숨겨야 할때 사용
• 페이지 렌더링 시점에, 이동할 주소가 정해져 있지 않은 경우 사용 (ex. 비동기로 클릭 시점에 이동할 주소가 정해지는 경우 등)
• 내부 페이지로의 이동 시, 이 방식을 사용해야 SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.

3. a 태그

// 3. a 태그를 이용
<a href="/home">HOME</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>

 

 

 

 

 

 

 

 

 

 

 

---------

https://velog.io/@1nthek/Next.js-Link-router.push-a-tag-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8B%A4%EB%A5%BC%EA%B9%8C