Importowanie komponentów w NextJS

Importować można nie tylko pliki z danymi, ale także komponenty, podobnie jak to robimy przy pracy w zwykłym React. Spójrzmy, jak to działa.

Na początek wprowadźmy pewne konwencje. Jak już wiesz, w folderze src/app umieszczane są strony serwisu. Umieśćmy komponenty potomne w folderze src/comp.

Podłączmy teraz komponent potomny do jakiejś strony. Załóżmy, że mamy taką stronę:

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

Załóżmy, że mamy następujący komponent potomny:

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

Zaimportujmy nasz komponent potomny do naszej strony:

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

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

Wykonajmy wstawienie zaimportowanego komponentu. W tym celu użyjmy tagu z nazwą zmiennej komponentu:

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

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