Impor Komponen di NextJS

Yang dapat diimpor bukan hanya file berisi data, tetapi juga komponen seperti cara yang biasa kita lakukan saat bekerja dalam React biasa. Mari kita lihat bagaimana cara kerjanya.

Pertama, mari kita tentukan beberapa kesepakatan. Seperti yang sudah Anda ketahui, di folder src/app terdapat halaman-halaman situs. Mari tempatkan komponen anak di folder src/comp.

Sekarang mari kita hubungkan komponen anak ke suatu halaman. Misalkan kita memiliki halaman seperti ini:

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

Misalkan kita memiliki komponen anak berikut:

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

Mari impor komponen anak kita ke halaman kita:

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

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

Lakukan penyisipan komponen yang diimpor. Untuk ini, gunakan tag dengan nama variabel komponen:

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

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

Buatlah beberapa komponen anak. Impor komponen-komponen tersebut ke halaman-halaman Anda.