Komponentlərin NextJS-də İdxalı

Yalnız məlumat fayllarını deyil, həmçinin komponentləri də, adi React-la işləyərkən etdiyimiz kimi, idxal etmək olar. Gəlin görək bu necə işləyir.

Əvvəlcə bəzi razılaşmalar təqdim edək. Artıq bildiyiniz kimi, src/app qovluğunda veb səhifələri yerləşir. Gəlin alt komponentləri src/comp qovluğunda yerləşdirək.

Gəlin indi hansısa səhifəyə alt komponenti qoşaq. Tutaq ki, bizim belə bir səhifəmiz var:

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

Tutaq ki, bizim aşağıdakı alt komponentimiz var:

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

Gəlin alt komponentimizi səhifəmizə idxal edək:

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

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

İdxal edilmiş komponenti daxil edək. Bunun üçün komponent dəyişəninin adı ilə teqdən istifadə edək:

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

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