Импорт компонентов в 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 />
  </>;
}