Uvoz komponenata u NextJS

Možete uvesti ne samo fajlove sa podacima, već i komponente, slično kako smo navikli da radimo u običnom React-u. Hajde da pogledamo kako to funkcioniše.

Za početak, hajde da uvedemo neke konvencije. Kao što već znate, u folderu src/app se nalaze stranice sajta. Hajde da smestimo podređene komponente u folder src/comp.

Hajde sada da povežemo podređenu komponentu sa nekom stranicom. Neka imamo ovakvu stranicu:

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

Neka imamo sledeću podređenu komponentu:

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

Uvezimo našu podređenu komponentu na našu stranicu:

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

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

Izvršimo umetanje uvežene komponente. Za to koristimo tag sa imenom varijable komponente:

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

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