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:

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

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

export default function Child() {
	return <p>
		child
	</p>;
}

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

import 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:

import Child from '@/comp/child/child.jsx';

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

Birkaç alt bileşen oluşturun. Bunları sayfalarınıza içe aktarın.