Importování komponentů v NextJS

Importovat lze nejen soubory s daty, ale i komponenty podobně jako jsme zvyklí při práci v obyčejném Reactu. Podívejme se, jak to funguje.

Pro začátek zavedeme některé konvence. Jak již víte, ve složce src/app jsou umístěny stránky webu. Umístěme dceřiné komponenty do složky src/comp.

Nyní připojme dceřinou komponentu k nějaké stránce. Předpokládejme, že máme takovou stránku:

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

Předpokládejme, že máme následující dceřinou komponentu:

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

Importujme naši dceřinou komponentu na naši stránku:

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

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

Proveďme vložení importované komponenty. K tomu použijeme tag s názvem proměnné komponenty:

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

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