NextJSのメインレイアウトにおけるサイトの構成要素

私たちのサイトレイアウトを見てみましょう。現在、レイアウトには変更可能なページコンテンツを挿入するためのコマンドが指定されています:

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

しかし、通常サイトには他の部分もあり、それらは様々なページに対して不変のままです。例えば、ヘッダーとフッターがそれに当たります。これらを私たちのレイアウトに追加しましょう:

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

あなたのプロジェクトのレイアウトに、ヘッダー、フッター、そして右および左のサイドバーのブロックを追加してください。