Learn Next.js 제 5장 : Navigating Between Pages

사용자가 대시보드 경로 사이를 탐색할 수 있도록 몇 가지 링크를 추가하겠습니다.

 

이번 장에서 배울 내용

* next/link 요소 사용 방법

* usePathname() 에 대한 활성 링크를 표시하는 방법

* Next.js에서 내비게이션이 작동하는 방식

 

내비게이션을 최적화하는 이유는 무엇일까?

전통적으로 HTML의 <a> 요소를 사용합니다. 현재 사이드바 링크는 <a> 요소를 사용하여 각 페이지 이동시 전체 페이지 새로 고침이 있습니다.

 

The <Link> component

Next.js 에서는 <Link />를 사용할 수 있습니다.

Javascript로 client-side navigation을 수행할 수 있습니다.

 

import Link from 'next/link';

import 해서 사용하며 <a /> 태그를 <Link /> 태그로 교체해 주면 됩니다.

 

Automatic code-splitting and prefetching (자동 코드 분할 및 프리페칭)

루트별로 코드를 분할한다는 것은 페이지가 분리된다는 것을 의미합니다. 특정 페이지에서 오류가 발생해도 나머지 응용 프로그램은 계속 작동합니다.

Next.js는 브라우저의 뷰포트에 구성요소가 나타날 때마다 백그라운드에서 연결된 경로에 대한 코드를 자동으로 미리 지정합니다.

사용자가 링크를 클릭할 때쯤에는 대상 페이지의 코드가 이미 백그라운드에 로드되며, 이것이 페이지 전환을 거의 즉각적으로 만드는 이유입니다.

 

Pattern: Showing active links

현재 링크 활성화 보여주기 패턴 사용해보기

적용하고 싶은 ui 파일에 'use client'를 작성하고 usePathname을 import 합니다. 이후 pathename을 변수로 받아와 상태를 확인할 수 있게 하고 2장에서 다루었던 clsx를 사용하여 적용시켜 줍니다.

'use client';
 ...
import { usePathname } from 'next/navigation';
 
// ...

export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

'use client';

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