[Next.js] Link

웹사이트에서 서로 다른 페이지를 연결할 때는 <a> 태그를 사용합니다.

Next.js에서는 Link와 a 태그를 함께 사용합니다.

---

1) index.js에 JSX 구문에 아래 코드를 삽입합니다.

import Link from "next/link";

export default function Home() {
  return (
    <h1 className="title">
      Learn <a href="https://nextjs.org">Next.js!</a>
    </h1>
  );
}

 

2) a 태그를 사용하고자 하는 페이지 상단에 아래와 같이 next/link의 Link 요소를 import 해옵니다. (index.js)

import Link from 'next/link'

 

3) 1번에서 작성한 코드 중 a 태그를 Link 요소로 감싸고, href를 a 태그에서 Link 요소를 속성으로 옮깁니다.

import Link from "next/link";

export default function Home() {
  return (
    <h1 className="title">
      Learn{" "}
      <Link href="https://nextjs.org">
        <a>Next.js!</a>
      </Link>
    </h1>
  );
}

{' '}는 여러 줄에 걸쳐 텍스트를 나누는 데 사용되는 빈 공간을 추가합니다.

 

4) 이번에는 posts/first-post.js를 만들어 index.js와 서로 이동할 수 있도록 구현해보겠습니다.

 

• pages 폴더 안에 posts 폴더를 생성 → 그 안에 first-post.js 파일 생성 후 아래 사진과 같이 코드 작성
  (index.js이기 때문에 href는 /로 설정)

 

• index.js로 이동하여 href 경로를 posts/first.post로 변경

---

위 예시에서 볼 수 있듯이 Link 요소는 a 태그를 사용하는 것과 비슷하다.

다른 점은 a 태그에 href 속성을 사용하는 것 대신 Link 요소로 a 태그를 감싸고,

Link 요소에 href 속성을 사용한다는 점이다.

 

이제 각 페이지에 링크가 있어야 앞뒤로 이동할 수 있다.

 

또한 Next.js는 코드 분할, 클라이언트 측 탐색 및 프리패치를 통해 최상의 성능을 위해 애플리케이션을 자동으로 최적화합니다.

경로를 파일로 만들고 pages 내장 Link 요소를 사용합니다. 그 때문에 라우팅 라이브러리가 필요하지 않습니다.

---

Learn | Next.js