[공식문서] NextJS 페이지 간 이동하기 #4

링크 컴포넌트

웹 사이트에서 페이지 간에 링크를 걸 때는 <a> HTML 태그를 사용합니다.

 

Next.js에서는 애플리케이션의 페이지 간에 링크를 걸 때 Link 컴포넌트인 next/link를 사용할 수 있습니다. <Link>는 클라이언트 측 탐색을 수행하며, 탐색 동작을 더 세밀하게 제어할 수 있는 프롭(props)을 받을 수 있게 해줍니다.

 

<Link> 사용하기

먼저, pages/index.js 파일을 열고 다음과 같이 Link 컴포넌트를 next/link에서 가져옵니다. 파일 상단에 다음 줄을 추가하세요.

import Link from 'next/link';

 

그런 다음 다음과 같이 보이는 h1태그를 찾습니다.

<h1 className="title">
  Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

 

그리고 다음과 같이 변경하세요.

<h1 className="title">
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

 

다음으로, pages/posts/first-post.js 파일을 열고 다음 내용으로 대체하세요.

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

 

보시다시피, Link 컴포넌트는 <a> 태그를 사용하는 것과 유사하지만, <a href="..."> 대신에 <Link href="...">를 사용합니다.

 

참고 : Next.js 12.2 이전에는 Link 컴포넌트가 <a> 태그로 감싸져 있어야 했지만, 12.2 버전 이상에서는 이러한 요구사항이 필요하지 않습니다.

 

작동하는지 확인해보세요.

이제 각 페이지에 링크가 추가되어 이동할 수 있는 링크가 생겼을 것입니다.

Next.js 공식문서 - 링크 이동