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

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

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