폴더에 layout.tsx을 추가하면 여러 경로간에 공유되는, page.tsx를 감싸는 레이아웃 UI를 그릴 수 있게 된다. 이는 중첩될 수 있다. 최상위 디렉토리에 선언된 layout.tsx는 루트 레이아웃이라고 하는데, 모든 경로에 적용되며 html과 body 태그를 필수로 포함한다.
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
)
}
Template
템플릿은 각 자식 레이아웃이나 페이지를 래핑한다는 점에서 레이아웃과 유사하다. 하지만 경로간에 지속되고 상태를 유지하는 레이아웃과 달리 페이지를 이동하면 새 인스턴스를 만든다. 즉, 경로가 변경되면 새 인스턴스가 마운트되고 DOM 요소가 다시 생성되고 상태가 유지되지 않는다.
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
Metadata
App 디렉토리에서는 기본 제공 SEO를 사용하여 제목 및 메타 등의 <head> HTML 요소를 수정할 수 있다. 메타데이터는 layout.tsx, page.tsx에서 메타데이터 객체를 내보내거나 generateMetadata 함수를 사용하여 정의할 수 있다.
