NextJSにおけるサイトレイアウトのコンテンツ

前回のレッスンで取り上げ始めた、基本的なサイトレイアウトについて考えてみましょう：

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

ご覧の通り、サイトレイアウトは関数コンポーネントとして表現されています。関数のパラメータにはオブジェクトが渡され、そこからキー children を対応する変数に展開しています。この変数には、リクエストされたURLに対応するファイル page.jsx の内容が格納されています。

つまり、ファイル layout.jsx にはサイトのレイアウトが格納されており、変数 children を使って、ページコンテンツが挿入されるべきレイアウト内の位置を指定しているのです。

例として、ページのコンテンツを何らかのタグで囲ってみましょう：

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

あなたのサイトのコンテンツをタグ main で囲んでください。