Kuingiza Vifaa katika NextJS

Inawezekana kuingiza sio tu faili zenye data, bali pia vifaa sawa na jinsi tulivyo zoea kufanya wakati wa kufanya kazi katika React ya kawaida. Hebu tuangalie jinsi inavyofanya kazi.

Kuanza, hebu tuanzishe makubaliano fulani. Kama unavyojua tayari, katika folda src/app kurasa za tovuti zimewekwa. Hebu tuweke vifaa vidogo katika folda src/comp.

Hebu sasa tuunganishe kifaa kidogo kwa ukurasa fulani. Wacha tuwe na ukurasa kama huu:

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

Wacha tuwe na kifaa kidogo kifuatacho:

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

Wacha tuingize kifaa chetu kidogo kwenye ukurasa wetu:

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

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

Wacha tufanye uingizaji wa kifaa kilichoingizwa. Kwa hili tutatumia kitambulishi chenye jina la kigezo cha kifaa:

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

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