Қисмҳои сомона дар компонентҳо дар NextJS

Дар дарси қаблӣ мо матнро қисмҳои сомонаро рост дар файли макет навишта будем:

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

Аммо, ин метавонад ғайримувофиқ бошад дар он ҳолате, ки қисмҳои сомона дар баргирандаи сер код ва матн бошанд. Аз ин рӯ, одатан қисмҳои сомона дар файлҳои ҷудогонаи компонентҳо мебароранд.

Барои мисол, биёед header-и сомонаро дар компоненти ҷудогона барем. Файли мувофиқ созем:

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

Компоненти худро дар файли макет ворид мекунем:

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

export default function RootLayout({children}) {
	
}

Матни компоненти худро бо истифода аз тег бо номи он баровардем:

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>
	);
}

Компонентҳои ҷудогона бо header ва footer-и сомона созед.