Импорти компонентҳо дар 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 />
</>;
}
Чанд компоненти фарзанд эҷод кунед. Онҳоро ба саҳифаҳои худ импорт кунед.