Komponentleri NextJS-e import etmek

Diňe maglumat faýllaryny däl, eýsem komponentleri hem import etmek mümkin, biz adaty React işleýänimizdäki ýaly. Geliň, munyň nädip işleýändigine göz aýlap geçireliň.

Başlangyç üçin käbir ylalaşyklary girizeliň. Bilşiňiz ýaly, src/app papkasynda sahypa faýllary ýerleşdirilýär. Geliň çagyrylan komponentleri src/comp papkasyna ýerleşdireliň.

Indi käbir sahypa çagyrylan komponenti birikdireliň. Bizde şeýle bir sahypa bolsun:

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

Bizde şeýle bir çagyrylan komponent bolsun:

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

Indi bizim çagyrylan komponentimizi sahypamyza import edeliň:

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

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

Import edilen komponenti goýuşy ýerine ýetirýäris. Munuň üçin komponentiň ady bilen ýörite bellik ulanýarys:

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

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