Komponentide importimine NextJS-is

Importida saab mitte ainult andmefaile, vaid ka komponente sarnaselt sellega, kuidas me oleme harjunud tegutsema tavalise React-i puhul. Vaatame, kuidas see töötab.

Alustuseks võtame kasutusele mõned kokkulepped. Nagu te juba teate, asuvad kausta src/app veebilehe lehed. Paneme alamkomponendid kausta src/comp.

Ühendame nüüd mõne alamkomponendi mõne lehega. Olgem meil näiteks selline leht:

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

Olgem meil järgmine alamkomponent:

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

Importime oma alamkomponendi oma lehele:

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

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

Teeme imporditud komponendi sisestamise. Selleks kasutame komponendi muutuja nimega tegit:

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

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