[Next.js Learn] Navigate Between Pages(3) - Link Component

Link 컴포넌트(Link Component)

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

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

<Link> 사용하기(Using Link)

첫째로, pages/index.js 파일을 열고 다음 줄을 맨 위에 추가하여 next/link에서 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 버전 이상에서는 필수 사항이 아닙니다.

작동 여부를 확인해보죠. 이제 각 페이지마다 앞뒤로 이동할 수 있는 링크가 있어야 합니다.

출처: https://nextjs.org/learn/basics/navigate-between-pages/link-component