Съдържание в оформлението на уебсайт в NextJS

Нека разгледаме основното оформление на уебсайта, което започнахме да разглеждаме в предишния урок:

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

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

Тоест във файла layout.jsx у нас се съхранява оформлението на уебсайта, а с помощта на променливата children ние посочваме мястото в оформлението на уебсайта, в което трябва да се вмъкне съдържанието на страницата.

За пример нека оформим съдържанието на страницата в някакъв таг:

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

Оформете съдържанието на вашия уебсайт в тага main.