Компоненттерді 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 />
  </>;
}