Componenten importeren in NextJS

Je kunt niet alleen bestanden met gegevens importeren, maar ook componenten, net zoals we gewend zijn te werken in gewone React. Laten we eens kijken hoe dit werkt.

Laten we eerst enkele afspraken maken. Zoals je al weet, worden in de map src/app de pagina's van de website geplaatst. Laten we onderliggende componenten plaatsen in de map src/comp.

Laten we nu een onderliggende component verbinden met een pagina. Stel dat we de volgende pagina hebben:

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

Stel dat we de volgende onderliggende component hebben:

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

Laten we onze onderliggende component importeren naar onze pagina:

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

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

Laten we de geïmporteerde component invoegen. Hiervoor gebruiken we de tag met de naam van de componentvariabele:

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

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