1. Layout
: 필요한 것을 복사 붙여넣기 없이 어디서나 사용할 수 있는 시스템
2. Layout 적용 과정
- layout component에 있는 export된 default component를 렌더링 → 실제 렌더링
- 이동하려는 페이지를 URL을 통해 인식 → component(layout component의 children prop)를 렌더링
- TypeScript) children의 타입이 ReactNode
- children이 실제 내가 이동하려는 페이지
import Navigation from "./components/navigation"
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
)
}3. 특정 Layout 만들기
- 해당 URL 폴더에 layout.tsx 파일 만들기
- 기존의 layout.tsx 파일 복사 붙여넣기 해서 틀 잡고 수정하기
export default function AboutUsLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
{children}
© Next JS is great!
</div>
)
}
- 해당 URL 내에 페이지 만들기
- 새로운 페이지의 layout이 없는 경우 상위 폴더의 layout이 적용되어있음
export default function Sales() {
return (
<div>
<h1>Sales jobs</h1>
</div>
);
}
- Layout은 중첩이 가능함
Share article