Контент в макете сайта в NextJS

Рассмотрим основной макет сайта, который мы начали разбирать в прошлом уроке:

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

Как вы видите, макет сайта представляет собой компонент с функцией. При этом в параметр функции передается объект, из которого мы извлекаем ключ children в соответствующую переменную. В этой переменной хранится содержимое файла page.jsx, который соответствует запрошенному URL.

To есть в файле layout.jsx у нас хранится макет сайта, а с помощью переменной children мы указываем место в макете сайта, в которое должен вставится контент страницы.

Для примера давайте оформим контент страницы в какой-нибудь тег:

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

Оформите контент вашего сайта в теге main.