Next.js에서는 layout.tsx 파일을 이용해 페이지의 레이아웃을 구성할 수 있다.
이 레이아웃 시스템은 중복 없이 구조적인 UI를 만들 수 있게 해주고, 페이지 간 전환 시에도 공통 UI를 유지하게 해준다.
레이아웃 파일의 기본 개념
- layout.tsx는 Next.js가 페이지를 렌더링하기 전에 먼저 확인하는 파일.
- 각 디렉토리에 존재할 수 있으며, 중첩 레이아웃을 구성할 수 있다.
- 즉, 상위 디렉토리의 레이아웃 안에 하위 디렉토리의 레이아웃이 포함되어 렌더링됩니다.
레이아웃의 렌더링 과정
- Next.js는 먼저 최상위(root) 레이아웃부터 렌더링을 준비한다. /app/layout.tsx
- 그 후 현재 URL을 기준으로 해당 경로의 디렉토리로 이동하여,해당 디렉토리에 layout.tsx가 있는지 확인
- 만약 있다면, 해당 레이아웃은 상위 레이아웃 안에 중첩되어 렌더링 (상쇄되지 않고, 중첩 구조를 유지)
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>
<Header />
<main>{children}</main>
<Footer />
</body>
</html>
);
}
- {children}은 내부 페이지나 하위 레이아웃이 들어오는 자리
'개발공부 > Next.js' 카테고리의 다른 글
| [Next.js] Loading UI (0) | 2025.04.14 |
|---|---|
| [Next.js] Route Groups, Dynamic Routes, Metadata (0) | 2025.04.13 |
| [Next.js] 하이드레이션(Hydration) (0) | 2025.04.12 |
| [Next.js] App Router (0) | 2025.04.08 |
| [Next.js] 스타트 - 프로젝트 생성 (0) | 2025.04.08 |
