템플릿은 각 자식 레이아웃이나 페이지를 감싸는 데 레이아웃과 유사하다.
레이아웃은 경로 간에 유지되고 상태를 유지하는 반면, 템플릿은 탐색 시 각 자식에 대해 새 인스턴스를 생성한다. 이는 사용자가 템플릿을 공유하는 경로 간에 탐색하는 경우 컴포넌트의 새 인스턴스가 마운트되고 DOM 요소가 재생성되며 상태가 보존되지 않으며 효과가 재동기화됨을 의미한다.
이러한 특정 동작이 필요한 경우가 있을 수 있으며, 이 때 템플릿이 레이아웃보다 적합한 옵션이 될 수 있다. 예를 들어
레이아웃 내의 Suspense 경계는 레이아웃이 처음 로드 될 때만 대체 내용을 표시하고 페이지를 전환할 때는 표시하지 않는다. 그러나 템플릿의 경우, 대체 내용이 각 탐색에 표시된다.템플릿은 template.js 파일에서 기본 React 컴포넌트를 내보내어 정의할 수 있다. 컴포넌트는 children prop을 허용해야 한다.
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
중첩 측면에서 template.js는 레이아웃과 그 자식 사이에 렌더링된다.
간단한 출력예시는 아래와 같다.
<Layout>
{/* 템플릿에는 고유한 키가 제공된다. */}
<Template key={routeParam}>{children}</Template>
</Layout>
앱 디렉토리에서는 layout.js 또는 page.js 파일 내에서 metadata 객체나 generateMetadata 함수를 내보내어 title 및 meta와 같은 <head> HTML 요소를 수정할 수 있다.
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js',
}
export default function Page() {
return '...'
}
<aside>
💡 루트 레이아웃에는 <title> 및 <meta>와 같은 <head> 태그를 수동으로 추가해서는 안 된다. 대신 Metadata API를 사용해야 한다. Metadata API는 스트리밍 및 <head> 요소의 중복 제거와 같은 고급 요구 사항을 자동으로 처리한다.
→ 더보기
</aside>