2025.1.7 수요일의 공부기록
Next.js에서 자동 생성되는 layout.tsx
파일은 특정 요소를 페이지 간에 재사용할 수 있도록 설계된 구조다. 예를 들어, 네비게이션 바와 같은 공통 컴포넌트를 모든 페이지에서 사용하고자 할 때 layout.tsx
를 활용할 수 있다.
layout.tsx
의 존재 이유layout.tsx
는 페이지 간 공통된 레이아웃을 관리하기 위한 파일이다.
공통 요소(예: 네비게이션 바, 푸터 등)를 반복적으로 각 페이지에 추가할 필요 없이 한 곳에서 관리할 수 있다. 이를 통해 코드 재사용성과 유지보수성을 높일 수 있다.
Next.js는 레이아웃 → 페이지 파일 순서로 렌더링을 진행한다.
layout.tsx
에 정의된 디폴트 컴포넌트가 먼저 렌더링된다.layout.tsx
:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<nav style={{ padding: '10px', backgroundColor: '#eee' }}>
<a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a>
</nav>
{children}
</body>
</html>
);
}
page.tsx
(예: /about):
export default function AboutPage() {
return <h1>About Us</h1>;
}
layout.tsx
에 정의된 네비게이션 바가 먼저 렌더링된다.about/page.tsx
의 콘텐츠(About Us
)가 layout.tsx
에서 {children}
자리에 삽입된다.layout.tsx
layout.tsx
는 특정 페이지 또는 페이지 그룹에만 적용할 수 있다.
레이아웃을 적용할 페이지가 포함된 폴더에 layout.tsx
파일을 생성하면 된다.
해당 폴더 아래의 모든 페이지에도 레이아웃이 적용된다.
app/
├── layout.tsx // 전체 레이아웃 (기본 레이아웃)
├── page.tsx // 홈 페이지
├── about/
│ ├── layout.tsx // About 전용 레이아웃
│ ├── page.tsx // About 페이지
│ └── team/
│ ├── page.tsx // Team 페이지
/about
경로 → about/layout.tsx
가 적용된 후, about/page.tsx
가 렌더링된다./about/team
경로 → about/layout.tsx
가 적용된 후, about/team/page.tsx
가 렌더링된다.Next.js에서는 레이아웃이 여러 개일 경우, 중첩되는 방식으로 작동한다.
레이아웃 파일이 서로 대체되지 않고, 부모 레이아웃 위에 자식 레이아웃이 추가되는 구조다.
app/
├── layout.tsx // 기본 레이아웃 (Global Layout)
├── about/
│ ├── layout.tsx // About 전용 레이아웃
│ ├── page.tsx // About 페이지
/about
경로 접근 시, app/layout.tsx
(Global Layout)이 먼저 렌더링된다.about/layout.tsx
(About Layout)이 렌더링된다.about/page.tsx
의 콘텐츠가 렌더링된다.app/layout.tsx
:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<header>Global Header</header>
{children}
<footer>Global Footer</footer>
</body>
</html>
);
}
app/about/layout.tsx
:
export default function AboutLayout({ children }: { children: React.ReactNode }) {
return (
<div>
<aside>About Sidebar</aside>
<main>{children}</main>
</div>
);
}
app/about/page.tsx
:
export default function AboutPage() {
return <h1>About Us</h1>;
}