Uvoz komponent v NextJS

Uvoziti je mogoče ne le datoteke s podatki, temveč tudi komponente podobno, kot smo navajeni delovati pri delu v običajnem Reactu. Poglejmo, kako to deluje.

Za začetek vpeljimo nekaj dogovorov. Kot že veste, v mapi src/app se nahajajo strani spletnega mesta. Postavimo podrejene komponente v mapo src/comp.

Povežimo zdaj podrejeno komponento na katero koli stran. Recimo, da imamo takšno stran:

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

Recimo, da imamo naslednjo podrejeno komponento:

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

Uvozimo našo podrejeno komponento na našo stran:

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

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

Izvedimo vstavljanje uvožene komponente. Za to uporabimo oznako z imenom spremenljivke komponente:

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

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