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

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

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

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

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

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

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