[Next.js] 기초 4. Layout System (레이아웃 시스템)

Layout

Next.js에서 Layout은 여러 페이지에서 공통으로 사용하는 UI 컴포넌트를 의미합니다. 예를 들어, 여러 페이지에서 동일하게 유지되는 네비게이션 바, 푸터, 사이드바 등이 Layout으로 구현될 수 있습니다. 이를 통해 코드의 중복을 피하고, 일관된 사용자 경험을 제공할 수 있습니다.

위 사진 처럼 layout을 정의한다면

/about-us의 하위 URL 페이지들은 /about-us의 layout에서 정의된 UI는 공통적으로 나타내질 것 입니다

Root Layout

애플리케이션의 모든 페이지에 공통으로 적용되는 레이아웃입니다. 예를 들어, 글로벌 네비게이션 바, 사이트의 메인 푸터 등 전역적으로 사용되는 UI 요소들을 포함합니다. Root Layout은 Next.js 애플리케이션의 구조를 설정하고, 각 페이지의 레이아웃을 일관되게 유지하는 데 사용됩니다.

 

Root Layout은 일반적으로 _app.js 또는 최신 버전에서는 app/layout.js에 구현됩니다.

 

Root Layout과 각 파일의 Layout파일은 서로 상쇄되지 않고 중첩됩니다

따라서 필요에 따라 개별적인 Layout을 가질 수 있습니다

 

정리하자면 Root Layout은 최상위로써 기본 구조를 담당하고, 각 페이지의 Layout 파일은 해당 페이지나 섹션에만 적용되는 추가적인 UI요소를 제공합니다. 이를 통해서 페이지별로 다른 레이아웃을 가지면서도 공통된 부분은 유지할 수 있습니다.

 

프레임워크는 이동하려는 페이지에 가장 가까운 레이아웃을 찾으려고 시도하게 됩니다.

예를 들어서 Sales페이지에 이동하고 싶다면 해당 페이지를 먼저 찾은 다음 가까운 레이아웃을 찾으려고 할 것 입니다.

 

아래 사진을 보면서 설명해보자면

Sales를 먼저 찾고 -> 상위 항목인 Company를 확인할거고 -> 그다음 Root 레이아웃을 확인하게 될 것 입니다.