[Next.js] Link

Next.js에서 SPA처럼 클라이언트 측 경로 전환도 가능합니다.

이를 위해 <Link>라는 요소가 제공됩니다.

Link는 다이나믹 경로를 제공하며, URL 개체를 사용할 수도 있습니다.

<Link href={`/blog/${argument}`}/>
<Link href={{
	pathname: '/blog/[slug]',
	query: {slug: post.slug},
}}/>

Link 태그를 사용할 때, 주의할 점이 몇 가지 있습니다.

Link 사용 주의사항

1. 자식이 <a>태그를 감싸는 컴포넌트인 경우

   만약 자식이 <a>태그를 래핑하고 있다면 Link에 passHref를 추가해주어야 합니다.

   passHref는 자식 컴포넌트로 href 값을 전달해줍니다.

   <Link href={href} passHref>
   	<WrppedAtag>go to href</WrppedAtag>
    </Link>

   만약 passHref를 추가하지 않는다면 해당 태그를 눌렀을 때 이동은 되지만 새 창이나 새 탭에서 열 수 없습니다.

   또한 SEO에서 a 태그의 href 속성을 통한 콘텐츠 인덱싱이 불가능하기 때문에 SEO에 좋지 않은 영향을 끼칩니다.

2. 자식이 함수 컴포넌트인 경우

   자식이 함수 컴포넌트라면 해당 컴포넌트를 React.forwardRef로 래핑해주어야 합니다.

   함수형 컴포넌트는 인스턴스가 없어 ref 속성을 사용할 수 없기 때문입니다.

   const CustomButton = React.forwardRef(({onClick, href}, ref) => {
   	return (
   		<a href={href} onClick={onClick} ref={ref}>
   			CustomButton
   		</a>
   	)
   });
   
   ...
   <Link href="/main" passHref>
   	<CustomButton />
   </Link>
   ...

History에 추가하지 않는 방법

Link는 기본적으로 URL을 history에 추가합니다.

replace 프로퍼티를 사용한다면 해당 URL을 기록하지 않을 수 있습니다.

<Link href="/main" replace>
	<a>Button</a>
</Link>

페이지 변경 시, 스크롤이 맨 위로 가지 않게 하는 방법

Link는 기본적으로 페이지 이동 후 스크롤을 맨 위로 올립니다.

scroll프로퍼니 값을 false로 지정하여 스크롤 이동을 막을 수 있습니다.

<Link href="/main" scroll={false}>
	<a>Button</a>
</Link>