[NextJS] 튜토리얼 챕터 5 - 페이지간 이동

들어가기 전에

이 글은 Next.js - Chapter 5 : Navigating Between Pages강의를 번역한 글입니다.

페이지간 이동

이전 챕터에서, 대시보드 레이아웃과 페이지들을 만들었습니다. 이제 유저가 대시보드 라우트간 이동을 할 수 있도록 링크를 추가해봅시다.

이번 챕터에서...

여기 우리가 다룰 주제들이 있습니다.

• next/link를 사용하는 방법
• usePathname() 후크로 액티브 링크를 생성하는 방법
• Next.js에서 내비게이션이 동작하는 원리

왜 내비게이션을 최적화 하나요?

페이지간 링크를 생성하기 위해서, 우리는 전통적인 방법인 <a> HTML 태그를 사용해 왔습니다. 사이드바 링크는 <a>태그를 사용하고, 브라우저에서 home, invoices 그리고 customer페이지간 이동을 할 때 어떤일이 일어나는지 주목해보세요.

보셨나요?

각각의 이동마다 전체 페이지가 리프레쉬 됩니다.

컴퍼넌트

Next.js에서는 어플리케이션에서 페이지간 링크를 걸때 <Link /> 컴퍼넌트를 사용할 수 있습니다. <Link>는 Javascript를 통해 client-side navigation을 할 수 있게 해줍니다.

<Link /> 컴퍼넌트를 사용하기 위해, /app/ui/dashboard/nav-links.tsx를 열고 next/link에서 Link 컴퍼넌트를 불러(import)와주세요. 그리고 나서, <a> 태그를 <Link>로 바꿉시다.

/app/ui/dashboard/nav-links.tsx

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';

// ...

export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <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>
        );
      })}
    </>
  );
}

여기서 볼 수 있듯, Link 컴퍼넌트는 <a> 태그와 굉장히 유사합니다.
단지 <a href="..."> 대신 <Link href="...">을 사용하는것 뿐입니다.

변경사항을 저장하고, 로컬호스트에서 동작을 확인해봅시다.
이제 전체 페이지가 리프레쉬 되는것 없이 페이지간 이동이 가능한걸 볼 수 있습니다. 어플리케이션의 일부는 서버쪽에서 렌더링 되지만, 전체 페이지의 리프레쉬는 없어서 이게 마치 웹 앱처럼 느껴집니다.

자동 코드 분할과 미리 가져오기

페이지 이동 경험을 좋게 만들기위해서, Next.js는 자동적으로 route 경로에 따라 코드를 분산시켜놉니다. 이것은 초기에 불러올때 모든 코드를 불러오는 전통적인 React의 SPA와는 다른 부분입니다.

경로에 따라 코드를 분산시킨다는 것은 페이지가 별도로 구성되어 있다는것 입니다. 그래서 만약 특정 페이지가 에러가 난다해도, 어플리케이션의 나머지 부분은 여전히 동작합니다.

더욱이, 프로덕션 환경에서는 <Link> 브라우저 화면상에 컴퍼넌트를 사용하는때마다 Next.js는 백그라운드에서 자동으로 링크된 경로의 코드를 미리 불러옵니다. 유저가 클릭하는 시간에, 목적지 페이지의 코드는 백그라운드에서 이미 불러와져 있고, 이것이 페이지간 전환을 거의-즉시 이뤄지게 합니다!

내비게이션이 동작하는 방법에서 더 배워보세요.

퀴즈할 시간입니다!

익힌걸 테스트해보고 무엇을 배웠는지 봅시다.

프로덕션 환경에서 <Link>컴퍼넌트가 브라우저의 화면상에 나타날때, Next.js는 무엇을 하나요?

A 추가적인 CSS 다운로드

B 이미지 미리 불러오기

C 링크가 걸린 경로의 코드를 미리 가져오기

D 링크된 경로에 대해 lazy loading을 가능하게 하기

패턴: 활성화된 링크 보여주기

유저가 현재 어느 페이지에 있는지 나타내기 위해 활성화 된 링크(active link)를 보여주는 것은 일반적인 UI 패턴입니다. 이것을 하기 위해서는 URL에서 현재 어느 경로에 있는지 받을 필요가 있습니다. Next.js는 경로를 확인하고, 위의 UI패턴을 실행할 수 있는 usePathname()라 불리는 훅을 제공하고 있습니다.

usePathname()는 훅이므로, nav-links.tsx를 클라이언트 컴퍼넌트로 바꿀 필요가 있습니다. 파일 최상단에 "use client" 표기를 추가하고, next/navigation에서 usePathname()을 불러(import)옵시다.

/app/ui/dashboard/nav-links.tsx

'use client';

import {
  UserGroupIcon,
  HomeIcon,
  InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

// ...

다음으로, <NavLink /> 컴퍼넌트 안 pathname이라는 변수에 해당 경로를 할당하세요.

/app/ui/dashboard/nav-links.tsx

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

CSS 스타일하기 챕터에서 소개되었던 clsx라이브러리를 사용해서 링크가 활성화 되었을때를 조건으로 클래스를 적용할 수 있습니다. link.href가 pathname과 일치할때, 해당 링크는 파란 글자와, 밝은 파란색 배경으로 보여야 합니다.

여기 nav-links.tsx의 최종코드가 있습니다.

/app/ui/dashboard/nav-links.tsx

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

이제 저장하고 로컬호스트에서 확인해봅시다. 이제 파란색으로 활성화된 링크를 볼 수 있습니다.

챕터 5를 완료했습니다.

페이지간 링크를 거는 방법과, Next.js에서 클라이언트 사이드 페이지 이동을 했을때의 장점을 배웠습니다.

다음

6: 데이터 베이스 세팅하기

이제 진짜 데이터를 가져오기 위해 데이터베이스를 생성합시다!

챕터 6 시작하기

Ref

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