Импорт на компоненти в NextJS

Можете да импортирате не само файлове с данни, но и компоненти, подобно на това, както сме свикнали да работим в обикновен React. Нека да видим как работи това.

За начало ще въведем някои споразумения. Както вече знаете, в папката src/app се разполагат страниците на сайта. Нека разположим дъщерните компоненти в папка src/comp.

Нека сега свържем дъщерен компонент към някоя страница. Да кажем, че имаме следната страница:

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

Да кажем, че имаме следния дъщерен компонент:

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

Нека импортираме нашия дъщерен компонент в нашата страница:

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

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

Ще извършим вмъкване на импортирания компонент. За целта ще използваме таг с името на променливата на компонента:

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

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