Імпарт кампанентаў у 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 />
  </>;
}