Creating Layouts and Pages

지금까지 응용 프로그램에는 홈 페이지만 있습니다. 레이아웃과 페이지를 사용하여 더 많은 경로를 만드는 방법을 알아보겠습니다. 이 장에서는 우리가 다룰 주제는 다음과 같습니다

파일 시스템 라우팅을 사용하여 대시보드 경로를 생성합니다.
새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다.
여러 대시보드 페이지 간에 공유할 수 있는 중첩된 레이아웃을 만듭니다.
코로케이션(colocation), 부분 렌더링(partial rendering) 및 루트(root)가 무엇인지 이해합니다.

Nested routing

Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다.

layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있습니다. page.tsx는 React 구성 요소를 내보내는 특수 Next.js 파일이며 경로에 액세스할 수 있어야 합니다. 응용 프로그램에는 이미 페이지 파일(/app/page.tsx)이 있습니다. 이 파일은 경로 /와 연결된 홈 페이지입니다.

중첩 경로를 만들려면 폴더를 서로 중첩하고 그 안에 page.tsx 파일을 추가할 수 있습니다.

/app/dashboard/page.tsx는 /dashboard 경로와 연결됩니다. 어떻게 작동하는지 보기 위해 페이지를 만들어 보겠습니다!

Creating the dashboard page

/app 내에 dashboard라는 새 폴더를 만듭니다. 그런 다음, 아래 코드를 사용하여 대시보드 폴더 내에 새 page.tsx 파일을 만듭니다.

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/dashboard 방문하십시오. “대시보드 페이지” 텍스트가 표시되어야 합니다.

Next.js에서 다른 페이지를 만드는 방법은 다음과 같습니다: 폴더를 사용하여 새 경로 세그먼트를 만들고 그 안에 페이지 파일을 추가합니다.

Next.js는 페이지 파일에 대한 특별한 이름을 사용하여 색상차트 UI 컴포넌트, 테스트 파일 및 기타 관련 코드를 경로와 함께 배치할 수 있습니다. 페이지 파일 내의 콘텐츠만 공개적으로 액세스할 수 있습니다. 예를 들어 /ui 및 /lib 폴더는 경로와 함께 /app 폴더 내에 함께 배치됩니다.

Practice: Creating the dashboard pages

더 많은 경로를 만드는 연습을 해 보겠습니다. 대시보드에서 두 개의 페이지를 더 만듭니다.

고객 페이지: http://localhost:3000/dashboard/customers 에서 페이지에 액세스할 수 있어야 하며 <p>Customers Page</p>요소를 반환해야 합니다.
인보이스 페이지: 인보이스 페이지는 http://localhost:3000/dashboard/invoices 에서 액세스할 수 있어야 합니다. 지금은 <p>Invoices Page</p>요소도 반환합니다. 이 연습을 하는 데 시간을 할애하고 준비가 되면 아래 토글을 확장하여 솔루션을 확인하세요.

Creating the dashboard layout

대시보드에는 여러 페이지에서 공유되는 일종의 탐색 기능이 있습니다. 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 속성(prop;properties)을 받습니다. 이 자식은 페이지 또는 다른 레이아웃일 수 있습니다. 위의 코드의 경우 / dashboard 내부의 페이지는 다음과 같이 <Layout / > 안에 자동으로 중첩됩니다.

변경 사항을 저장하고 localhost를 확인하여 모든 것이 올바르게 작동하는지 확인하십시오. 다음이 표시되어야 합니다.

Next.js에서 레이아웃을 사용하는 한 가지 이점은 탐색 시 페이지 구성 요소만 업데이트되고 레이아웃은 다시 렌더링되지 않는다는 것입니다. 이를 부분 렌더링(partial rendering)이라고 하며, 페이지 사이를 전환할 때 레이아웃에서 클라이언트 측 React 상태를 유지합니다.

Root layout

참고로 챕터 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>
  );
}

이를 루트 레이아웃이라고 하며 모든 Next.js 응용 프로그램에 필요합니다. 루트 레이아웃에 추가하는 모든 UI는 애플리케이션의 모든 페이지에서 공유됩니다. 루트 레이아웃을 사용하여 <html> 및 <body> 태그를 수정하고 메타데이터를 추가할 수 있습니다(메타데이터에 대한 자세한 내용은 이후 장에서 설명).

방금 만든 새 레이아웃(/app/dashboard/layout.tsx)은 대시보드 페이지에 고유하므로 위의 루트 레이아웃에 UI를 추가할 필요가 없습니다.

Troble shooting

Export lusitana doesn’t exist in target module

이 에러 메시지는 lusitana라는 이름의 export가 @/app/ui/fonts.ts 파일에서 존재하지 않아서 발생하는 오류입니다. 즉, lusitana를 import하려고 했지만 해당 파일에서 lusitana를 export하지 않아서 오류가 발생한 것입니다.

Optimizing-Fonts-Images 의 Secondary font부분을 확인하세요.