6. next.js 에서 <Link> 태그를 쓰자!

<a>태그를 쓰려고 했더니 경고문이 떴다.

'/'로 이동하기 위해 <a>태그 대신 next/link에서 <Link>를 사용하라는 내용이었다.

 

<Link>?

- 경로 간의 이동을 위한 next.js에서의 라우터 기능

 

<a>태그 대신 <Link> 태그를 쓰는 이유?

- <a>태그를 쓰면 react의 특징인 SPA 동작이 아닌 새로고침이 되면서 페이지 이동을 하기 때문에 불필요한 리렌더링이 발생한다.

그리고 <a>태그로 전환되어서 SEO에도 좋다고 한다.

 

<Link>의 props들

- href : 경로 또는 URL (유일한 필수 props. 없으면 에러남!)

- as : 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터

- passHref : href를 <Link>의 자식에게 무조건 props로 보냄. 기본은 false

- prefetch : 백그라운드에서 페이지를 미리 가져옴. viewport에 있는 모든 <Link>항목은 자동으로 미리 road됨.

기본은 true이기 때문에 비활성화 하고싶을땐 prefetch={false}로 전달한다.

-  replace : history 스택에 새 URL을 추가하는 대신 현재 페이지로 대신한다. 기본은 false

- scroll : 경로로 이동 후 상단으로 스크롤한다. 기본은 true

- shallow - getStaticProps 재실행하지 않고 현재 페이지의 경로를 업데이트한다. 기본은 false

- locale - 링크에 활성 locale이 자동으로 추가된다. 기본은 false

 

<Link> 쓰는 방법

상단에 import Link from 'next/link'

이동을 해야할 부분에 <Link> 태그를 붙여준다 href안에는 원하는 경로를 붙여준다.

 

<a>태그를 감싸야 되는 경우는?

<Link href={'/'} passHref>
	<a>태그로 감싸줄때?<a>
<Link/>

이런식으로 Link태그가 a 태그를 감싸서 적용하는 때도 있다.

next.js는 React-Router의 styled(Link)같은 커스텀을 지원하지 않는다고 한다.

그래서 styled-components 같은 라이브러리를 사용할 때는 감싸줘야 한다.

 

그래서 Link에 passHref (href를 <Link>의 자식에게 무조건 props로 보냄. 기본은 false)를 붙여주어서

a태그에 경로를 강제로 전달해주어야 한다.

 

이렇게 하지 않으면 태그에 속성이 없어서 사이트의 접근성이 떨어지고 SEO에 영향을 미친다고 한다.

 

 

* nextjs docs

https://nextjs.org/docs/messages/no-html-link-for-pages