티스토리 뷰
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다.
app/layout.tsx는 application 전체의 공통으로 들어가는 컴포넌트들을 작성할 때 사용한다.
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="ko">
<body>
<header>
헤더
<Navigation />
</header>
{children}
<footer>푸터</footer>
</body>
</html>
);
}
헤더와 푸터가 모든 페이지에 공통적으로 들어간 것을 볼 수 있다.
아래처럼 about-us폴더 아래 layout.tsx를 만들어주면
회사소개 페이지에만 사용하는 레이아웃을 설정해 줄 수도 있다.
이는 about-us 하위의 모든 컴포넌트에 적용된다.
export default function AboutUsLayout({ children }: { children: React.ReactNode }) {
return (
<div>
{children}
<h3>회사소개 페이지의 레이아웃</h3>
</div>
);
}
레이아웃들은 서로 상쇄되는 것이 아니라 중첩된다.
현재 프로젝트 디렉터리 구조가 아래와 같을 때
만약 sales 페이지에 이동하고 싶다면 next.js는 page를 먼저 찾은 다음
가장 가까운 레이아웃(/app/about-us/team/sales/layout.tsx)을 찾는다.
그 다음 파일의 상위 경로(/app/about-us/team)로 이동하여 layout.tsx가 있는지 확인하고
레이아웃이 있는 경우에는 해당 레이아웃을 중첩하고 없다면 그 다음 상위(/app/about-us)를 마찬가지로 확인한다.
/app/about-us에 있는 layout도 중첩되고 그 다음 /app에 있는 root layout까지 확인하여 총 3개의 레이아웃이 중첩된다.
<RootLayout>
<AboutUsLayout>
<SalesTeamLayout>
<SalesTeamPage />
</SalesTeamLayout>
</AboutUsLayout>
</RootLayout>
반응형
'개발공부 > ⬛ Next.js' 카테고리의 다른 글
| [Next.js] 사전 렌더링 이해하기 (0) | 2024.08.30 |
|---|---|
| [Next.js 14] Parallel Requests (1) | 2024.07.10 |
| [Next.js 14] 서버 컴포넌트에서의 data fetching (1) | 2024.07.09 |
| [Next.js 14] metadata (0) | 2024.06.28 |
| [Next.js 14] Hydration과 "use client" (0) | 2024.06.27 |
개발자 삐롱히
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그