• In the previous chapter, you created the dashboard layout and pages. Now, let's add some links to allow users to navigate between the dashboard routes.
• In this chapter... Here are the topics we’ll cover
  • How to use the next/link component.
  • How to show an active link with the usePathname() hook.
  • How navigation works in Next.js.

Why optimize navigation?

• 페이지끼리 연결하기 위해 사용하는 전통적인 방법은 HTML <a> element를 사용하는 것이다. 하지만, 이 방법은 전체 페이지가 refresh새로고침되는 문제점이 있다.
  • 실제로 현재 프로젝트의 navigation이 a태그를 사용해 구현되어 있는데, 실제로 navigation의 각 페이지를 클릭해보면, 브라우저 좌측 상단에 refresh표시가 “x”로 바뀌고, 탭에도 로딩 표시가 뜨면서 새로고침이 되는 것을 확인할 수 있다.

The <Link> component

• Next.js에서는 <Link /> 컴포넌트를 사용하여 앱내 페이지 간의 연결을 구현한다. <Link> 컴포넌트는 JavaScript를 이용한 client-side navigation을 가능하게 해주기 때문에, 페이지 전체가 새로고침 되는 것을 방지할 수 있다.
  • ⇒ 핵심 내용이라고 할 수 있겠다. 다시 정리해보자: Next.js는 <Link> 컴포넌트를 통한 client-side navigation을 제공하여 리로딩 없는 페이지 이동을 할 수 있다.
• /app/ui/dashboard/nav-links.tsx 파일에 next/link를 import하여 Link 컴포넌트를 사용해보자. (기본 <a>태그를 <Link>로 대체하면 된다)
  • a와 마찬가지로 href를 사용해 이동할 path를 명시해주면 된다.

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

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
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() {
  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>**
        );
      })}
    </>
  );
}

• 이렇게 코드를 입력하고 나서 다시 navigation을 실제로 작동시켜보면, 이제는 페이지 전체 새로고침 없이 페이지 이동이 되는 것을 확인할 수 있다. (더이상 로딩표시 x)
• 앱의 일부분은 서버에 의해 렌더되는 것이 맞지만, 어쨌든 full page refresh는 더이상 발생하지 않고 더 “앱”같은 느낌을 준다. 어떻게 이게 가능한 것일까?

Automatic code-splitting and prefetching

• Next.js는 navigation experience를 개선하기 위해 route segments에 따라 앱을 code split 한다고 한다. 이 말은 코드를 분리된 번들로 쪼개어 독립적으로 로딩할 수 있도록 만든다는 뜻으로, 브라우저가 최초 로딩 시에 모든 앱 코드를 로딩하는 전통적인 React SPA 방식과는 다르다.

  • 코드를 쪼갠다는 것은(splitting code) 각 페이지가 고립isolated되어 있다는 것을 의미한다. 즉 특정 페이지에서 에러가 발생한다고 해도, 나머지 애플리케이션은 여전히 작동한다는 것이다.

• 여기에 더해, production에서 브라우저 viewport 내에 <Link> 컴포넌트가 나타나게 된다면 Next.js는 자동적으로 해당 linked route의 코드를 백그라운드에서 prefetch한다고 한다.

  • 따라서, 유저가 링크를 클릭할 때면 이미 해당 페이지의 코드가 백그라운드에 로딩되어 있는 것이고, 덕분에 page transition이 거의 즉각적으로(near-instant) 가능한 것이다.

• 더 자세한 내용은 아래 참고.

  Routing: Linking and Navigating

Quiz

정답: C