นำเข้า Components ใน NextJS

คุณสามารถนำเข้าได้ไม่เพียงแค่ไฟล์ ข้อมูล แต่ยังรวมถึง components เหมือนกับที่ เราคุ้นเคยในการทำงาน กับ React ปกติ ลองมาดูกันว่า มันทำงานอย่างไร

เริ่มต้นด้วยการกำหนดข้อตกลงบางประการ ตามที่คุณทราบแล้ว ในโฟลเดอร์ src/app เป็นที่จัดเก็บเพจของเว็บไซต์ ลอง วาง components ย่อยในโฟลเดอร์ src/comp

ทีนี้ลองเชื่อมต่อ component ย่อย กับเพจใดเพจหนึ่ง สมมติว่าเรามี เพจดังนี้:

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

สมมติว่าเรามี component ย่อย ต่อไปนี้:

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

นำเข้า component ย่อยของเรา ไปยังเพจของเรา:

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

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

ทำการแทรก component ที่นำเข้า เพื่อทำสิ่งนี้ ให้ใช้แท็กที่มีชื่อ ตัวแปรของ component:

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

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

สร้าง components ย่อยหลายๆ ตัว นำเข้าไปยัง เพจของคุณ