Կոմպոնենտների ներմուծում NextJS-ում

Ներմուծել կարելի է ոչ միայն տվյալներ պարունակող ֆայլերը, այլև կոմպոնենտներ՝ նման այն բանի, ինչին մենք սովոր ենք սովորական React-ում աշխատելիս։ Եկեք տեսնենք, թե ինչպես է դա աշխատում։

Սկսելու համար եկեք ներմուծենք որոշակի համաձայնեցումներ։ Ինչպես արդեն գիտեք, src/app պանակում տեղադրվում են cայթի էջերը։ Եկեք ենթակոմպոնենտները տեղադրենք 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 />
	</>;
}

Ստեղծեք մի քանի ենթակոմպոնենտներ։ Ներմուծեք դրանք ձեր էջերին։