Вгнездени layout-и во NextJS

Како што знаете, во папката /app во датотеката /layout.jsx се наоѓа главниот layout на веб-страницата.

Доколку сакате, сепак, во вгнездените папки може да креирате свои layout-и. Во овој случај, содржината на страницата прво ќе се вметне во вгнездениот layout, а потоа добиениот резултат ќе се вметне во главниот layout.

Ајде да пробаме во пракса. Нека нашиот главен layout има следниот изглед:

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

Ајде да направиме уште еден, вгнезден layout за сите содржини од папката /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			порака за сите корисници
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Како што можете да видите, во овој layout не ги наведуваме основните тагови на страницата, бидејќи тие веќе се присутни во нашиот главен layout на страницата.

Ајде да направиме и датотека со содржина за приказ на корисник:

export default function User() {
	return <>
		<h1>Корисник</h1>
		<p>
			опис на корисникот
		</p>
	</>;
}

По овие манипулации, нашата датотечна структура ќе изгледа вака:

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

Сега, ако пристапиме до соодветниот URL, NextJS ќе ги собере сите заедно и во прелистувачот ќе го добиеме следниот конечен HTML код:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				порака за сите корисници
			</div>
			
			<h1>Корисник</h1>
			<p>
				опис на корисникот
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Направете дел на страницата за корисници и дел за постови. Направете во секој дел свој layout, кој ќе наследува од главниот layout на страницата.