Next.js 튜토리얼 - ch5. 페이지 간 네비게이팅

Learn Next.js 튜토리얼
https://nextjs.org/learn/dashboard-app/getting-started

Next.js 튜토리얼 - ch5. 페이지 간 네비게이팅

Next.js는 <Link> 컴포넌트를 사용하여 불필요한 자원 낭비 혹은 네트워크 요청을 하지 않음으로써 네비게이션 최적화를 한다.

Next.js의 컴포넌트의 특장점

1. Client-side navigating
   • 링크 클릭 시 전체 페이지를 새로 로드하지 않고 JavaScript로 클라이언트 사이드 네비게이팅을 하게 되어 네트워크 비용을 줄일 수 있다. 부분적으로는 SSR을 하게 되지만, 전체 페이지를 새로 렌더링 하지 않기 때문에 사용자 경험을 향상시키고 불필요한 네트워크 요청을 줄여주는 장점이 있다.
2. 자동 code-splitting과 prefetching
   • 리액트의 컴포넌트는 네비게이팅 시 SPA로 동작한다. (초기 로딩 시 브라우저가 모든 코드를 로드) 반면 Next.js의 <Link> 컴포넌트는 코드 스플리팅을 통해 페이지를 독립적으로 유지한다. 그래서 일부 페이지에 오류가 발생하더라도 나머지 애플리케이션은 문제 없이 동작하게 된다.
   • code-splitting 덕분에 필요한 자원들만 로드하게 되어 자원 낭비가 적다.
   • 컴포넌트가 브라우저의 뷰포트 내에 나타나면, Next.js는 자동적으로 링크된 경로를 백그라운드에서 프리페칭한다. 그래서 사용자가 링크를 클릭하면 이미 백그라운드에서 로딩된 화면으로 전환되기 때문에, 페이지 전환이 매우 빠르다.

Active Link 보여주기

usePathname 훅을 사용하여 현재 페이지의 경로를 알 수 있다. 이를 사용하여 navigation bar의 링크들 중 현재 보고있는 페이지의 링크에 대해 css 효과를 줄 수 있다. (active 효과)

'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';

// ...

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>
        );
      })}
    </>
  );
}

 

위 코드에서 usePathname 훅을 사용하여 현재 페이지의 경로를 받아와서 pathname 변수에 저장했다. 그리고 navbar의 link들 중 pathname과 동일한 link가 존재한다면, 해당 link에 css 효과를 주도록 clsx를 사용해 동적으로 클래스를 추가하였다.