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 />
  </>;
}