NextJS හි සංරචක ආයාත කිරීම

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

පළමුව, යම් සම්මුතීන් හඳුන්වා දෙමු. ඔබ දැනටමත් දන්නා පරිදි, src/app ෆෝල්ඩරය තුළ වෙබ් අඩවි පිටු අඩංගු වේ. අපි උප සංරචක src/comp ෆෝල්ඩරය තුළ තබමු.

දැන් අපි උප සංරචකයක් යම් පිටුවකට සම්බන්ධ කරමු. අපට මෙවැනි පිටුවක් ඇතැයි සිතමු:

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

අපට පහත උප සංරචකය ඇතැයි සිතමු:

export default function Child() {
	return <p>
		child
	</p>;
}

අපගේ උප සංරචකය අපගේ පිටුවට ආයාත කරමු:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

ආයාත කරන ලද සංරචකය ඇතුළත් කරමු. මේ සඳහා සංරචක විචල්‍යයේ නම සහිත ටැගය භාවිතා කරන්න:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child />
	</>;
}

උප සංරචක කිහිපයක් සාදන්න. ඒවා ඔබගේ පිටුවලට ආයාත කරන්න.