[Next.js] next/Link 사용하기 (공식문서 내용 정리)

next/Link 사용하기

1.pages의 하위 디렉토리가 아래와 같을때

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

 

2. import 후

import Link from 'next/link'

 

3. 아래의 형태로 사용

<Link href="/">
  <a>Home</a>
</Link>
<Link href="/about">
  <a>About Us</a>
</Link>
<Link href="/blog/hello-world">
   <a>Blog Post</a>
</Link>

 

 

Link의 props정리

  필수값   

1. href

이동할 경로 혹은 URL

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

 

 

  옵션값   

1. as

이동할 경로 혹은 URL

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

 

2. passHref

  기본값 : false  

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

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

참고 : https://f-dever-error-log.tistory.com/56

 

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

 

3. prefetch

  기본값 : true  

뷰포트 내의 Link 태그 데이터만 미리 받아온다. 

 

  - 파일의 전체 Link태그가 아닌 "뷰포트 내"인것을 참고,
      전체 페이지가 아니라 스크롤 안의 보이는 요소들을 기준으로 한다.
  -  prefetch=false   설정을 통해 끌 수 있지만, 그래도 마우스 오버 시에는 작동한다.
  - production 모드에서만 실행된다.

     따라서 개발모드로는 확인할 수 없고 production 모드로 돌린 후 네트워크 탭을 통해 확인이 가능

 

4. replace

  기본값 : false  

push대신 replace하는 속성

뒤로가기 history에 쌓이지 않고 대체된다

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

 

5. scroll

  기본값 : true  

화면 이동시 페이지 상단으로 스크롤

 

스크롤 자동으로 상단으로 올라가는 부분 제거

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

 

6. shallow

  기본값 : false  

서버단에서 실행되는 메소드들을 재실행하지 않고 이동할지 여부 

 

getStaticProps, getServerSideProps, getInitialProps를 실행시키지 않고 현재 URL을 업데이트

> 리렌더링이 일어나지 않는다고 함

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

 

---

✔️ 참고

https://nextjs.org/docs/api-reference/next/link

https://yceffort.kr/2020/03/nextjs-01-route