[Next.js] Next.js 페이지 이동 구현하기 (Link, usePathName 사용 )

Next.js는 Link 컴포넌트를 제공하여 클라이언트 사이드 네비게이션을 가능하게 하며, 페이지 전환 시 사용자 경험을 대폭 향상시킵니다. 또한, 이번 학습에서는 활성화된 링크를 표시하는 방법도 함께 작성해보겠습니다. 

 

1. Link 컴포넌트: 클라이언트 사이드 네비게이션

기존 HTML의 <a> 태그를 사용하면 페이지 이동 시 전체 새로고침이 발생합니다.
하지만 Next.js의 Link 컴포넌트를 사용하면 클라이언트 사이드에서 페이지가 전환되며, 새로고침 없이 빠르고 매끄러운 전환이 가능합니다.

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link'; // <- Link 추가 
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link // <- Link 사용 
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

 

2. Next.js의 네비게이션 최적화

Next.js는 클라이언트 사이드 네비게이션을 더욱 부드럽게 만들기 위해 자동으로 다음 작업을 수행합니다:

코드 스플리팅

각 경로(segment)마다 코드를 분리하여 필요한 페이지의 코드만 로드합니다. 특정 페이지에서 에러가 발생해도 나머지 앱이 정상적으로 동작합니다.

사전 로드(prefetching)

프로덕션 환경에서는 Link 컴포넌트가 브라우저 화면에 나타나는 즉시, 해당 경로의 코드를 백그라운드에서 로드합니다. 사용자가 링크를 클릭하면 이미 코드가 로드된 상태이므로 페이지 전환이 거의 즉각적으로 이루어집니다.

 

 

3. 활성화된 링크 표시

사용자가 현재 보고 있는 페이지를 강조하기 위해 활성화된 링크를 표시하는 것은 일반적인 UI 패턴입니다. Next.js에서는 usePathname 훅을 사용해 현재 경로를 확인할 수 있습니다.

 

코드 예시

 

1. use client 선언: usePathname은 클라이언트 컴포넌트에서만 사용 가능하므로 파일 상단에 "use client"를 추가합니다.
2. usePathname 사용: 현재 경로와 링크의 경로를 비교해 활성화 상태를 표시합니다.

'use client' // <-추가

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation'; // <-추가
import clsx from 'clsx'; // <-추가

const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

export default function NavLinks() {
  const pathname = usePathname();
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx( // <-추가
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              { 
                'bg-sky-100 text-blue-600': pathname === link.href, 
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

 

 

clsx 라이브러리를 활용해 조건에 따라 클래스를 동적으로 추가했습니다. 현재 경로(pathname)와 링크 경로(link.href)가 일치하면 배경과 텍스트 색상이 변경됩니다.

 

전체 새로고침이 발생하지 않으며 현재 클릭한 링크는 배경색과 텍스트 색이 변경되는 것을 확인할 수 있습니다.

 

 

https://nextjs.org/learn/dashboard-app/navigating-between-pages

Learn Next.js: Navigating Between Pages | Next.js