next/link

Next.js에서 next/link는 라우팅을 위한 고수준 컴포넌트입니다. 이를 사용하면 사용자는 웹 페이지간에 빠르고 간편하게 이동할 수 있습니다. next/link는 내부적으로 클라이언트 측 라우팅을 사용하여 사용자가 새 페이지로 이동할 때 브라우저에서 전체 페이지를 새로 로드하는 대신 필요한 부분만 변경합니다. 이로 인해 애플리케이션의 성능이 향상되고 사용자 경험이 개선됩니다.

장점:

1. 퍼포먼스 향상: next/link는 페이지 전환에 클라이언트 측 라우팅을 사용하여 브라우저가 전체 페이지를 다시 로드할 필요가 없게 해줍니다. 이로 인해 페이지 전환 시간이 크게 줄어들고 사용자 경험이 향상됩니다.

2. 사전 불러오기 (Prefetching): 프로덕션 모드에서, Next.js는 뷰포트 내에 있는 모든 next/link 컴포넌트의 페이지를 자동으로 사전에 불러옵니다 (Prefetch). 이 기능 덕분에 사용자가 링크를 클릭하면 이미 불러와져 있기 때문에 페이지 전환을 즉시 수행할 수 있습니다.

3. 높은 유연성: next/link 컴포넌트는 렌더링될 때 <a> 태그를 포함할 수 있지만 필수는 아닙니다. 즉, 거의 모든 것을 클릭 가능한 요소로 만들 수 있습니다.

단점:

1. 외부 링크 제한: next/link는 Next.js 애플리케이션 내부의 링크에만 사용할 수 있습니다. 외부 웹사이트로 이동하려면, 표준 <a> 태그를 사용해야 합니다.

2. 페이지간 상태 유지 불가: 클라이언트 측 라우팅은 페이지 전환간에 상태를 유지하지 못합니다. 즉, 한 페이지에서 다른 페이지로 이동할 때 페이지의 상태가 초기화됩니다.

next/link의 기본적인 사용법은 다음과 같습니다:

import Link from 'next/link'

function Navigation() {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Navigation

위 예제에서, next/link는 두 개의 링크, 즉 홈페이지와 'About' 페이지를 생성합니다. 이 링크들은 클라이언트 측 라우팅을 사용하여 페이지 전환을 수행하므로 사용자는 페이지 전환을 즉시 경험할 수 있습니다.