감성개발자의 Blog

Article

Next.js Link 컴포넌트로 페이지 전환 최적화

Next.js의 Link 컴포넌트는 내장 컴포넌트로, 애플리케이션의 페이지 간 이동을 최적화합니다. 일반적인 HTML <a> 태그와 달리, 클라이언트 사이드 라우팅을 사용하여 페이지 전체를 다시 로드하지 않고 필요한 부분만 업데이트합니다.

기본 사용법

Link 컴포넌트의 가장 간단한 사용 방법입니다.

import Link from 'next/link';

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}
  • href: 필수 속성으로, 이동할 페이지의 경로를 지정합니다
  • 자식 요소: Link의 자식 요소는 보통 <a> 태그입니다

Prefetching 기능

Link 컴포넌트는 기본적으로 뷰포트에 들어온 링크의 페이지를 자동으로 미리 로드(prefetch)합니다. 이를 통해 다음 페이지 로딩 속도를 크게 향상시킬 수 있습니다.

<Link href="/about" prefetch={true}>
  <a>About</a>
</Link>

Prefetch를 비활성화하려면:

<Link href="/about" prefetch={false}>
  <a>About</a>
</Link>

주요 속성

Link 컴포넌트의 주요 속성들:

속성설명
href이동할 페이지의 경로 (필수)
as브라우저 주소창에 표시할 경로 (마스킹 용도)
replacetrue면 브라우저 히스토리 스택을 대체
scroll페이지 이동 후 스크롤 위치 지정 (기본값: true)
prefetch링크 prefetching 활성화 여부 (기본값: true)

Link 컴포넌트 vs 태그

  1. 클라이언트 사이드 라우팅: 페이지 새로고침 없이 라우팅하므로 빠른 전환
  2. Prefetching: 자동으로 다음 페이지를 미리 로드하여 성능 향상
  3. SEO 최적화: 서버 사이드 렌더링과 잘 작동하여 SEO 친화적
  4. 코드 분할: 페이지별 필요한 코드만 로드하므로 번들 크기 감소

태그 사용 시기

  • 외부 링크로 이동할 때
  • 다른 도메인으로 이동할 때
  • 파일 다운로드 링크

실제 사용 예제

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Link href="/posts">
        <a>Posts</a>
      </Link>
      {/* 외부 링크는 <a> 태그 사용 */}
      <a href="https://example.com">External Site</a>
    </nav>
  );
}

동적 라우팅과 함께 사용

<Link href="/posts/[id]" as={`/posts/${postId}`}>
  <a>{postTitle}</a>
</Link>

핵심 요약

Next.js의 Link 컴포넌트는 웹 애플리케이션의 라우팅을 최적화하는 핵심 도구입니다. 클라이언트 사이드 라우팅, 자동 prefetching, 코드 분할 등의 기능으로 사용자 경험을 크게 향상시킬 수 있습니다. Next.js 애플리케이션에서는 내부 링크에 Link 컴포넌트를 사용하는 것이 권장됩니다.

댓글