NextJS'te Bileşen İçe Aktarma

Sadece veri dosyalarını değil, aynı zamanda bileşenleri de, normal React'te çalışırken alışkın olduğumuz gibi içe aktarabiliriz. Bunun nasıl çalıştığına bir göz atalım.

Öncelikle bazı kabul ettiğimiz kuralları belirleyelim. Bildiğiniz gibi, src/app klasöründe site sayfaları bulunur. Alt bileşenleri src/comp klasörüne yerleştirelim.

Şimdi bir alt bileşeni bir sayfaya bağlayalım. Şöyle bir sayfamız olsun:

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

Şu alt bileşene sahip olduğumuzu varsayalım:

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

Alt bileşenimizi sayfamıza içe aktaralım:

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

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

İçe aktarılan bileşeni ekleyelim. Bunun için bileşen değişken adıyla bir etiket kullanacağız:

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

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