지금까지 애플리케이션에는 홈페이지만 있었습니다. 레이아웃과 페이지를 사용하여 더 많은 경로를 생성하는 방법을 알아봅시다.
- 파일 시스템 라우팅을 사용하여
dashboard경로를 만듭니다. - 새 경로 세그먼트를 생성할 때 폴더와 파일의 역할을 이해합니다.
- 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다.
- 코로케이션, 부분 렌더링, 루트 레이아웃이 무엇인지 이해합니다.
1. 중첩된 라우팅
Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다.
layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있습니다.
page.tsx는 React 구성 요소를 내보내는 특수 Next.js 파일이며 경로에 접근할 수 있어야 합니다. 애플리케이션에는 이미 페이지 파일: /app/page.tsx가 있습니다. - 이는 / 경로와 연결된 홈페이지입니다.
중첩된 경로를 만들려면 폴더를 서로 중첩하고 그 안에 page.tsx 파일을 추가하면 됩니다. 예를 들어:
/app/dashboard/page.tsx는 /dashboard 경로와 연관되어 있습니다. 페이지를 만들어서 어떻게 작동하는지 살펴보겠습니다.
2. 대시보드 페이지 만들기
/app안에 dashboard라는 새 폴더를 만듭니다. 그런 다음 dashboard 폴더 내에 다음 내용이 들어간 새 파일 page.tsx를 만듭니다.
// /app/dashboard/page.tsx
export default function Page() {
return <p>Dashboard Page</p>;
}이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/dashboard 를 방문하세요. "Dashboard Page" 텍스트가 표시되어야 합니다.
Next.js에서 다양한 페이지를 생성하는 방법은 다음과 같습니다. 폴더를 사용하여 새 경로 세그먼트를 생성하고 그 안에 page 파일을 추가합니다.
page 파일에 특별한 이름을 지정함으로써 Next.js를 사용하면 UI 구성 요소, 테스트 파일 및 기타 관련 코드를 경로와 함께 배치(colocate)할 수 있습니다. page 파일 내부의 콘텐츠에만 공개적으로 액세스할 수 있습니다. 예를 들어 /ui 및 /lib 폴더는 /app 폴더 경로 내에 같은 위치에 함께 있습니다.
✍ 연습문제: 대시보드 페이지 생성
더 많은 경로를 만드는 연습을 해보세요. 대시보드에서 두 개의 페이지를 더 만듭니다.
- 고객 페이지 : 페이지는 http://localhost:3000/dashboard/customers 에 액세스할 수 있어야 합니다. 지금은
<p>Customers Page</p>요소를 반환해야 합니다. - 송장 페이지 : 송장 페이지는 http://localhost:3000/dashboard/customers 에서 액세스할 수 있어야 합니다. 지금은
<p>Invoices Page</p>요소도 반환합니다.
3. 대시보드 레이아웃 만들기
대시보드에는 여러 페이지에서 공유되는 일종의 탐색 기능이 있습니다. Next.js에서는 특수 layout.tsx 파일을 사용하여 여러 페이지 간에 공유되는 UI를 만들 수 있습니다. 대시보드 페이지의 레이아웃을 만들어보겠습니다.
/dashboard 폴더 안에 새 파일 layout.tsx를 추가하고 다음 코드를 붙여넣습니다.
// /app/dashboard/layout.tsx
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}이 코드에서는 몇 가지 일이 진행되고 있으므로 분석해보겠습니다.
먼저 구성 요소 <SideNav />를 레이아웃으로 가져옵니다. 이 파일로 가져오는 모든 구성 요소는 레이아웃의 일부가 됩니다.
구성 요소 <Layout />은 children 객체를 받습니다. 이 하위 객체는 페이지일 수도 있고 다른 레이아웃일 수도 있습니다. 귀하의 경우, /dashboard 내부 페이지는 다음과 같이 자동으로 <Layout /> 안에 중첩됩니다.
변경 사항을 저장하고 로컬 호스트를 확인하여 모든 것이 올바르게 작동하는지 확인하세요. 다음이 표시되어야 합니다.
Next.js에서 레이아웃을 사용할 때의 이점 중 하나는 탐색 시 페이지 구성 요소만 업데이트되고 레이아웃은 다시 렌더링되지 않는다는 것입니다. 이를 부분 렌더링이라고 합니다.
4. 루트 레이아웃
3장에서는 Inter 글꼴을 다른 레이아웃 /app/layout.tsx로 가져왔습니다. 상기하기:
// /app/layout.tsx
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}이를 루트 레이아웃이라고 하며 필수입니다. 루트 레이아웃에 추가하는 모든 UI는 애플리케이션의 모든 페이지에서 공유됩니다. 루트 레이아웃을 사용하여 <html> 및 <body> 태그를 수정하고 메타데이터를 추가할 수 있습니다. (메타데이터에 대한 자세한 내용은 이후 장에서 배우게 됩니다.)
방금 생성한 새 레이아웃(/app/dashboard/layout.tsx)은 대시보드 페이지마다 고유하므로 위의 루트 레이아웃에 UI를 추가할 필요가 없습니다.
🔍 퀴즈
- Next.js에서 레이아웃 파일의 목적은 무엇입니까?
a. 글로벌 오류 처리기 역할을 하기 위해
b. 전체 애플리케이션에서 데이터를 가져오고 상태를 관리하기 위해
c. 여러 페이지에서 UI를 공유하기 위해
d. 전체 응용프로그램의 진입점 역할을 하기 위해
