Komponensek importálása NextJS-ben

Nem csak adatfájlokat importálhatunk, hanem komponenseket is, hasonlóan ahhoz, amit a szokásos React használata során szoktunk csinálni. Nézzük meg, hogyan működik ez.

Először is határozzunk meg néhány egyezséget. Amint már tudod, a src/app mappában találhatók a webhely oldalai. Helyezzük el a gyermek komponenseket a src/comp mappában.

Most kapcsoljunk be egy gyermek komponenst valamilyen oldalhoz. Tegyük fel, hogy van egy ilyen oldalunk:

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

Tegyük fel, hogy a következő gyermek komponensünk van:

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

Importáljuk a gyermek komponensünket az oldalunkra:

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

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

Végezzük el az importált komponens beillesztését. Ehhez használjuk a komponens változónevével ellátott tag-et:

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

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