Link 컴포넌트 심화와 usePathname

<Link> vs <a> - 클라이언트 사이드 내비게이션

Ch.1에서 <Link>를 처음 사용했습니다. HTML의 <a> 태그와 비슷해 보이지만, 동작 방식이 근본적으로 다릅니다.

직접 확인해 보세요. 루트 레이아웃에서 <Link>를 <a>로 바꿔보면, 페이지를 이동할 때마다 화면이 깜빡이며 전체가 다시 로드됩니다.

Prefetching - 미리 로드하기

<Link>에는 숨겨진 기능이 하나 더 있습니다. 프로덕션에서 링크가 뷰포트(화면)에 보이면, Next.js가 백그라운드에서 해당 경로를 prefetch합니다. 사용자가 클릭하기 전에 이미 준비가 되어 있으므로, 이동이 거의 즉시 일어날 수 있습니다.

  
    
  
  
    
  

// 기본 동작(auto): 정적 라우트는 전체, 동적 라우트는 loading.tsx 경계까지 부분 prefetch
<Link href='/blog'>블로그</Link>

// prefetch 끄기
<Link href='/blog' prefetch={false}>블로그</Link>

기본값인 prefetch="auto"에서는 정적 라우트는 전체 경로를, 동적 라우트는 가장 가까운 loading.tsx 경계까지 부분적으로 prefetch합니다. 따라서 어떤 요청이 발생하는지는 라우트 성격에 따라 조금씩 달라질 수 있습니다.

usePathname - 현재 경로 알아내기

usePathname()은 현재 URL의 경로 부분을 반환하는 Hook입니다. 현재 페이지를 내비게이션에서 강조하거나, 특정 경로에서만 UI를 다르게 보여주는 등 경로에 따라 동작을 분기할 때 사용합니다.

  
    
  
  
    
  

'use client';

import { usePathname } from 'next/navigation';

export default function Example() {
  const pathname = usePathname();
  // /blog/nextjs-routing 접속 시 → "/blog/nextjs-routing"
  // /about 접속 시 → "/about"

  return <p>현재 경로: {pathname}</p>;
}

NavLink 컴포넌트 구현

usePathname과 Link를 조합하면 현재 페이지를 강조하는 내비게이션 링크를 만들 수 있습니다:

  
    
  
  
    
  

// app/components/NavLink.tsx
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function NavLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const isActive = pathname === href || pathname.startsWith(href + '/');

  return (
    <Link
      href={href}
      className={isActive ? 'font-bold text-blue-600' : 'text-inherit'}
    >
      {children}
    </Link>
  );
}

pathname.startsWith(href + '/')는 하위 경로도 활성 상태로 표시하기 위한 패턴입니다. 예를 들어 /blog/nextjs-routing에 접속해도 /blog 링크가 활성화됩니다.

참고로, usePathname()은 URL의 path 부분만 반환하며 쿼리 스트링은 포함하지 않습니다. 쿼리 스트링은 useSearchParams()를 사용합니다.