[Next.js] <Link> 태그 사용

Next.js에서 URL 혹은 경로이동을 할 때, Link 태그 사용

 

pages 하위 디렉토리 구조일 때

pages/index.js
pages/about.js
pages/blog/[slug].js

 

import Link

import Link from 'next/link'

 

사용하는 방법

// pages/index.js
<Link href="/">
  <a>Home</a>
</Link>

// pages/about.js
<Link href="/about">
  <a>About Us</a>
</Link>

// pages/blog/[slug].js
<Link href="/blog/hello-world">
   <a>Blog Post</a>
</Link>

 

---

 

Link의 props정리

필수 값

1. href

<Link href="URL 혹은 이동경로">
	...
</Link>

이동할 경로 혹은 URL을 입력한다.

 

 

---

 

옵션 값   

1. as

<Link href="/" as="브라우저의 주소창에 표시될 URL">
    ...
</Link>

브라우저의 주소창에 표시될 URL을 입력한다.

 

 

 

2. passHref (기본값: false)

next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할이다.

<Link href={{ pathname: "post", query: { id: post_id } }} passHref>
  <ChildATag>A태그</ChildATag> // 자식태그가 styled component a태그인 경우
</Link>

위처럼 passHref를 넣어서 작성해야 자식 컴포넌트의 a태그에 href가 전달된다.

 
3. prefetch (기본값: true)
뷰포트 내의 Link 태그 데이터만 미리 받아온다. 
파일의 전체 Link태그가 아닌 "뷰포트 내"인것을 참고한다.

전체 페이지가 아니라 스크롤 안의 보이는 요소들을 기준으로 한다.
prefetch=false   설정을 통해 끌 수 있지만, 그래도 마우스 오버 시에는 작동한다.
production 모드에서만 실행된다.
따라서 개발모드로는 확인할 수 없고 production 모드로 돌린 후 네트워크 탭을 통해 확인이 가능하다.

 
4. replace (기본값: false)

push대신 replace하는 속성이다.

<Link href="/" replace>
    ...
</Link>

history에 쌓이지 않고 대체된다

 

5. scroll (기본값: true)
화면 이동시 페이지 상단으로 스크롤한다.

<Link href="/" scroll={false}>
   ...
</Link>

위 코드처럼 scroll ={false}로 지정해준다면 스크롤이 자동으로 상단으로 올라가는 부분 제거한다.

 

 

6. shallow (기본값: false)
서버단에서 실행되는 메소드들을 재실행하지 않고 이동할지 여부이다.

<Link href="/" shallow={true}>
    ...
</Link>

getStaticProps, getServerSideProps, getInitialProps를 실행시키지 않고 현재 URL을 업데이트한다.
리렌더링이 일어나지 않는다.