Learn Next.js 제 4장 : Creating Layouts and Pages

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다.

 

이번 장에서 배울 내용

* dashboard routes를 만들고 file-system routng을 사용해 봅니다.

* 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다.

* 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다.

* colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다.

 

Nested routing

중첩 라우팅

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

 

라우팅 페이지 만들기

Next.js에서는 /app 디렉터리를 기준으로 / (root) URL을 가진다.

하위 폴더에 page.tsx파일을 만들어 하위 페이지를 생성한다.

app
    layout.tsx
    page.tsx	/
    dashboard
    	page.tsx	/dashboard
        customers
        	page.tsx	/dashboard/customers
        invoices
        	page.tsx	/dashboard/invoices

페이지의 기본 구성요소

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

 

대시보드 레이아웃 만들기

layout.tsx 파일 안에 포함된 <SideNav/> 컴포넌트는 하위 페이지들이 공통으로 적용되는 컴포넌트가 됩니다.

이렇게 상위 폴더로 부터 컴포넌트들이 서로 중첩되는 방식의 라우팅을 중첩 라우팅이라고 합니다.

 

Next.js에서 layout을 사용할 때 얻을 수 있는 한 가지 이점은 페이지 구성요소만 업데이트되고 layout은 re-rendering 되지 않는다는 것입니다. 이를 부분 렌더링(partial rendering)이라고 합니다.