이전 장에서는 대시보드 레이아웃과 페이지를 생성했습니다. 이제 사용자가 대시보드 경로를 탐색할 수 있도록 몇 가지 링크를 추가해 보겠습니다.
next/link구성 요소를 사용하는 방법usePathname()후크를 사용하여 활성 링크를 표시하는 방법- Next.js에서 탐색이 작동하는 방식
1. 탐색을 최적화하는 이유는 무엇입니까?
페이지를 연결하려면 일반적으로 HTML <a> 요소를 사용합니다 . 현재 사이드바 링크는 <a> 요소를 사용하지만 브라우저에서 홈, 송장, 고객 페이지 사이를 탐색할 때 어떤 일이 발생하는지 확인하세요.
봤습니까? 각 페이지 탐색에 전체 페이지 새로 고침이 있습니다.
2. <Link> 구성 요소
Next.js에서는 <Link /> 구성 요소를 사용하여 애플리케이션의 페이지를 연결할 수 있습니다. <Link>는 JavaScript를 사용하여 클라이언트 측 탐색을 수행할 수 있습니다.
<Link /> 구성요소를 사용하려면 /app/ui/dashboard/nav-links.tsx를 열고 next/link에서 Link 구성요소를 가져옵니다. 그런 다음 <a> 태그를 다음으로 바꿉니다.
// /app/ui/dashboard/nav-links.tsx
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 // 태그 바꾸기
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="…">를 사용합니다.
변경 사항을 저장하고 로컬 호스트에서 작동하는지 확인하세요. 이제 전체 새로고침을 보지 않고도 페이지 사이를 탐색할 수 있습니다. 애플리케이션의 일부가 서버에서 렌더링되지만 전체 페이지 새로 고침이 없으므로 웹 앱처럼 느껴집니다. 왜 그런 걸까요?
3. 자동 코드 분할 및 프리패치
탐색 경험을 향상시키기 위해 Next.js는 경로 세그먼트별로 애플리케이션을 자동으로 코드 분할합니다. 기존 React SPA와는 다릅니다. 브라우저는 초기 로드 시 모든 애플리케이션 코드를 로드합니다.
경로별로 코드를 분할한다는 것은 페이지가 격리된다는 의미입니다. 특정 페이지에서 오류가 발생하더라도 애플리케이션의 나머지 부분은 계속 작동합니다.
또한 프로덕션 환경에서 <Link> 구성 요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 연결된 경로에 대한 코드를 자동으로 미리 가져옵니다. 사용자가 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 즉각적으로 이루어집니다.
탐색 작동 방식에 대해 자세히 알아보세요.
🔍 퀴즈
- 프로덕션 환경에서 브라우저의 뷰포트에
<Link>구성 요소가 나타날 때 Next.js는 무엇을 합니까?
a. 추가 CSS를 다운로드합니다.
b. 이미지를 미리 로드합니다.
c. 연결된 경로의 코드를 미리 가져옵니다.
d. 연결된 경로에 대한 지연 로딩을 활성화합니다.
4. 패턴: 활성 링크 표시
일반적인 UI 패턴은 사용자가 현재 어떤 페이지에 있는지 알려주는 활성 링크를 표시하는 것입니다. 이렇게 하려면 URL에서 사용자의 현재 경로를 가져와야 합니다. usePathname()은 Next.js는 경로를 확인하고 이 패턴을 구현하는 데 사용할 수 있는 후크를 제공합니다.
usePathname()이 후크일 때부터 nav-links.tsx를 클라이언트 구성 요소로 전환해야 합니다. 파일 상단에 React의 "use client" 지시문을 추가한 후 next/navigation에서usePathname()을 가져옵니다.
// /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'; // usePathname 불러오기
// ...다음으로 <NavLinks /> 구성 요소 내부에서 pathname이라는 변수에 경로를 할당합니다:
// /app/ui/dashboard/nav-links.tsx
export default function NavLinks() {
const pathname = usePathname(); // 변수 선언
// ...
}CSS 스타일링 장에 소개된 clsx 라이브러리를 사용하여 링크가 활성화될 때 클래스 이름을 조건부로 적용할 수 있습니다. link.href가 pathname과 일치하면 링크가 파란색 텍스트와 연한 파란색 배경으로 표시되어야 합니다.
다음은 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'; // clsx 불러오기
// ...
export default function NavLinks() {
const pathname = usePathname();
return (
<>
{links.map((link) => {
const LinkIcon = link.icon;
return (
<Link
key={link.name}
href={link.href}
{/* clsx 추가하기 */}
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>
);
})}
</>
);
}로컬 호스트를 저장하고 확인하세요. 이제 파란색으로 강조 표시된 활성 링크가 표시됩니다.
