layout
- 페이지간에(routes) 공유가 가능한 UI
- 하위의 page 및 layout 를 자식(children)으로 감싸서 화면을 렌더링 함
- 여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능
Root Layout
- Next프로젝트를 생성하면 기본적으로 app폴더 안에 layout파일이 생성되는데 이 파일이 루트 레이아웃(Root Layout 파일 삭제 시 자동으로 생성)
- app/ 디렉토리의 최상위에 있는 layout로, 모든 route경로에 적용 됨
// app/layout.tsx (Root Layout)
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
- <html>과 <body> 태그를 포함해야 함
- 하위 layout은 <html>과 <body> 태그를 포함할 수 없음
// app/board/layout.tsx (하위 Layout)
export default function BoardLayout({
children,
}: {
children: React.ReactNode;
}) {
return ( // <html>과 <body> 태그를 포함할 수 없음
<div>
{children}
Next JS Board Layout
</div>
);
}
"use client"; // 에러 발생
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
