Mengimport Komponen dalam NextJS

Bukan hanya fail dengan data yang boleh diimport, komponen juga boleh diimport sama seperti cara kita biasa lakukan ketika bekerja dengan React biasa. Mari kita lihat bagaimana ia berfungsi.

Pertama, mari kita perkenalkan beberapa konvensyen. Seperti yang anda sudah ketahui, dalam folder src/app terletaknya halaman laman web. Mari letakkan komponen anak dalam folder src/comp.

Sekarang, mari sambungkan komponen anak kepada mana-mana halaman. Katakan kita mempunyai halaman seperti berikut:

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

Katakan kita mempunyai komponen anak berikut:

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

Mari import komponen anak kita ke halaman kami:

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

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

Mari lakukan penyisipan komponen yang diimport. Untuk ini, gunakan tag dengan nama pembolehubah komponen:

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

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

Buat beberapa komponen anak. Import mereka ke halaman anda.