[Next.js] Next.js의 Link Component

🚪 링크(Link) 컴포넌트

우리가 보통 HTML에서 웹 사이트 내의 다른 페이지로 이동할 때는 <a>태그를 쓴다.

Next.js에서는 Link 컴포넌트가 이를 대신한다. 

이 컴포넌트는 'next/link' 에 있다.

<Link>를 통해 애플리케이션의 다른 페이지로 클라이언트 탐색을 할 수 있다.

---

🛠️ 사용방법

사용하기에 앞서, import를 해줘야 한다.

import Link from 'next/link'

 

현재 pages/index.js 파일을 수정한다고 가정하고 about으로 가는 코드를 적어보자면,

 

<h1>
  Go To{' '}
  <Link href="/about">
    <a>About page!</a>
  </Link>
</h1>

이렇게 된다.

<a> 태그를 쓸 때와는 다르게 <Link> 태그로 <a> 태그를 감싸는 형식이고 href 속성은 <Link> 태그에 준다.

 Go To 뒤에 쓴 {' '} 문자열은 공식문서에 설명이 나와있듯, 여러 줄에 걸쳐 텍스트를 작성하는 경우 단어와 단어 사이의

공백을 추가하기 위한 문자열이다.

 

마찬가지로,

about 페이지에서 index 페이지로 가고 싶은 경우에는 about페이지 안에 위와 같은 코드를 적으면 된다.

대신 href='/' 를 하면 된다.