Импорти компонентҳо дар NextJS

Ман метавонед на танҳо файлҳоро бо маълумот, балки компонентҳоро низ ба монанди он, ки мо дар кор бо React-и оддӣ одат кардаем, импорт кунед. Биёед бубинем, ки ин чӣ гуна кор мекунад.

Барои оғоз баъзе қарорҳоро дохил мекунем. Тавре ки шумо аллакай медонед, дар пӯшаи src/app саҳифаҳои сайт ҷойгир карда мешаванд. Биёед компонентҳои фарзандро дар пӯшаи src/comp ҷойгир кунем.

Ҳоло биёед компоненти фарзандро ба ягон саҳифа пайваст кунем. Фарз мекунем, ки мо чунин саҳифа дорем:

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

Фарз мекунем, ки мо компоненти фарзанди зеринро дорем:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

Компоненти фарзанди худро ба саҳифаи мо импорт мекунем:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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

Гузориши компоненти импорткардаро иҷро мекунем. Барои ин тег бо номи тағирёбандаи компонентро истифода мебарем:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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