องค์ประกอบฝั่งเซิร์ฟเวอร์ในเฟรมเวิร์ก NextJS

ลองพิจารณาองค์ประกอบที่เราสร้างขึ้น ในบทเรียนที่แล้ว:

export default function Test() {
	return <h1>hello, user!</h1>;
}

ตามที่ได้กล่าวไว้ก่อนหน้านี้ โดยค่าเริ่มต้น ใน NextJS องค์ประกอบทั้งหมดจะเป็นฝั่งเซิร์ฟเวอร์ ในขณะเดียวกันเราสามารถใช้ความสามารถทั้งหมด ของภาษา JSX ได้ ยกเว้นการทำงานกับสเตต และฮุคอื่นๆ ที่คล้ายคลึงกัน

เป็นตัวอย่าง ลองสร้างตัวแปร และแสดงผลในโครงร่าง:

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

มีอาร์เรย์ของสินค้า:

let prods = [
	'prod1',
	'prod2',
	'prod3',
];

ใช้ลูปแสดงสินค้าเหล่านี้ ในรูปแบบรายการ ul ภายใน องค์ประกอบฝั่งเซิร์ฟเวอร์ของคุณ