레이아웃은 여러 경로 사이에서 공유되는 UI이다. 레이아웃은 내비게이션 시 상태를 보존하고 상호작용이 가능하며, 다시 렌더링되지 않는다. 또한, 레이아웃은 중첩될 수도 있다.
레이아웃을 정의하려면 layout.js 파일에서 React 컴포넌트를 기본으로 내보내면 된다. 이 컴포넌트는 렌더링 시 자식 레이아웃(존재하는 경우) 또는 페이지로 채워질 children prop을 받아야 한다.
예를 들어, 레이아웃은 /dashboard 및 /dashboard/settings 페이지와 공유된다.
app/
└── dashboard/
├── layout.js
├── page.js
└── settings/
└── page.js
이렇게 하면 /dashboard와 /dashboard/settings 페이지가 이 레이아웃을 공유하게 된다.
루트 레이아웃은 앱 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다. 이 레이아웃은 필수적이며, 서버에 반환되는 초기 HTML을 수정할 수 있도록 <html>
과 <body>
태그를 포함해야 한다.
기본적으로 폴더 계층 구조 내의 레이아웃은 중첩된다. 이는 레이아웃이 자식 레이아웃을 자신의 children prop을 통해 감싸는 것을 의미한다. 특정 경로 세그먼트(폴더) 내에 layout.js 파일을 추가함으로써 레이아웃을 중첩할 수 있다.
app/
├── layout.js
└── dashboard/
├── layout.js
└── page.js
세그먼트(segment)란 URL 경로에서 경로를 구성하는 각 부분을 말한다. 일반적으로 경로는 여러 세그먼트로 나뉘어지며, 각 세그먼트는 슬래시(/)로 구분된다.
예를 들어, 다음 URL에서 세그먼트는 다음과 같다
https://example.com/products/electronics/laptops
• 첫 번째 세그먼트: /products
• 두 번째 세그먼트: /electronics
• 세 번째 세그먼트: /laptops
💡 알아두면 좋은 정보.
<html>
및 <body>
태그를 포함할 수 있다.출처: Next.js 공식문서