Importovanie komponentov v NextJS

Importovať je možné nielen súbory s údajmi, ale aj komponenty podobne ako sme zvyknutí pri práci v obyčajnom Reacte. Pozrime sa, ako to funguje.

Na začiatok si stanovme niektoré dohody. Ako už viete, v priečinku src/app sa umiestňujú stránky webu. Umiestnime podradené komponenty do priečinka src/comp.

Poďme teraz pripojiť podradený komponent k nejakej stránke. Majme napríklad takúto stránku:

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

Predpokladajme, že máme nasledujúci podradený komponent:

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

Importujme náš podradený komponent na našu stránku:

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

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

Vykonajme vloženie importovaného komponentu. Na to použijeme značku s názvom premennej komponentu:

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

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