NextJS에서 중첩 레이아웃 사용하기

알다시피, /app 폴더의 /layout.jsx 파일에 사이트의 기본 레이아웃이 위치합니다.

원한다면, 중첩된 폴더에서도 자체 레이아웃을 생성할 수 있습니다. 이 경우 페이지 콘텐츠는 먼저 중첩된 레이아웃에 삽입된 후, 결과적으로 얻어진 내용이 기본 레이아웃에 삽입됩니다.

실제로 해봅시다. 우리의 기본 레이아웃이 다음과 같다고 가정해 보겠습니다:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

이제 /users 폴더의 모든 콘텐츠를 위한 중첩 레이아웃을 하나 더 만들어 보겠습니다:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

보시다시피, 이 레이아웃에서는 페이지의 기본 태그들을 지정하지 않습니다. 이미 사이트의 기본 레이아웃에 존재하기 때문입니다.

또한 사용자를 표시하기 위한 콘텐츠 파일을 만들어 보겠습니다:

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

이러한 작업 후에 우리의 파일 구조는 다음과 같이 보일 것입니다:

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

이제 해당 URL로 접근하면, NextJS가 모든 것을 함께 조립하고 브라우저에서 다음과 같은 최종 HTML 코드를 얻을 수 있습니다:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

사이트에 사용자 섹션과 포스트 섹션을 만드세요. 각 섹션마다 사이트의 기본 레이아웃을 상속하는 자체 레이아웃을 만드세요.