NextJS да компонентларни импорт қилиш

Фақат маълумотлар билан файлларнигина эмас, балки компонентларни ҳам оддий React ишлашда одатланганимизdek импорт қилиш мумкин. Бу қандай ишлашини кўрамиз.

Бошлаш учун байзи келишувларни киритамиз. Сиз биласиз, 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 />
	</>;
}

Бир нечта бола компонентлар яратинг. Уларни саҳифаларингизга импорт қилинг.