NextJS හි සංරචකවල වෙබ් අඩවි කොටස්

පෙර පාඩමේදී අපි වෙබ් අඩවියේ කොටස්වල පෙළ අයිතම පිරිසැලසුම් ගොනුවේම සෘජුව ලියා ඇත:

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

කෙසේ වෙතත්, මෙය අපහසු විය හැකිය වෙබ් අඩවි කොටස් විශාල ප්‍රමාණයක් අඩංගු වන විට කේතය සහ පෙළ. එබැවින් සාමාන්‍යයෙන් වෙබ් අඩවි කොටස් වෙනම ගොනු වලට ගෙන යන්න සංරචක.

උදාහරණයක් ලෙස, අපි ශීර්ෂකය ඉවත් කරමු වෙනම සංරචකයකට වෙබ් අඩවිය. අපි අදාළ ගොනුව සාදමු:

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

වෙනම සංරචක සාදන්න වෙබ් අඩවි ශීර්ෂකය සහ පාදකය සමඟ.