Části webu v komponentách v NextJS

V předchozí lekci jsme psali text částí webu přímo v souboru layoutu:

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

To však může být nepohodlné v případě, kdy části webu obsahují hodně kódu a textu. Proto se obvykle části webu vyčleňují do samostatných souborů komponent.

Pojďme pro příklad vyčlenit header webu do samostatné komponenty. Vytvořme odpovídající soubor:

export default function Header() {
	return <>
		header
	</>;
}

Naši komponentu importujeme v souboru s layoutem:

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

Vypíšeme text naší komponenty pomocí tagu s jejím názvem:

import Header from '@/comp/header/header.jsx';

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

Vytvořte samostatné komponenty s headerem a footerem webu.