Next의 Layout

Layout

• Next.js에서 레이아웃은 애플리케이션의 여러 페이지에서 공통으로 사용되는 UI 요소들을 재사용하고 관리하기 위한 패턴
  ex) Header, Footer, SideBar와 같은 공통 요소를 한 번만 설정하면 각 페이지에서 재사용이 가능해 코드 중복을 줄이고 일관된 사용자 경험을 제공할 수 있음
• layout 파일명은 Next.js 에서 라우터가 찾는 특수 파일 중 하나이기 때문에 반드시 지켜야 함

Root Layout

• app 폴더 내에는 모든 페이지에서 공통적으로 적용되는 Root Layout이 있음
• Root Layout은 모든 페이지의 공통 UI를 정의함
• html과 body 요소를 반환하고 body 내에서는 children을 동적으로 렌더링 함

Local Layout

• Next.js 에서 Local Layout은 특정 페이지 또는 그룹의 페이지에만 적용되는 레이아웃을 의미함
• 예를 들어, 관리자 페이지, 사용자 페이지에서 다른 레이아웃을 사용하려는 경우 Local Layout을 사용할 수 있음