Импорти компонентҳо дар 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 />
	</>;
}

Чанд компоненти фарзанд эҷод кунед. Онҳоро ба саҳифаҳои худ импорт кунед.