หลักการทำงานพื้นฐานของเฟรมเวิร์ก NextJS
ในบทเรียนที่ผ่านมา เราได้ติดตั้ง เฟรมเวิร์ก NextJS และทำความรู้จัก กับโครงสร้างพื้นฐานของมันแล้ว ถึงเวลาที่จะทำงานหลัก
ส่วนหลักของ NextJS คือ การกำหนดเส้นทาง (routing) การทำงานของ routing คือ เมื่อผู้ใช้ พิมพ์ URL ใดๆ ลงในแถบที่อยู่ของเบราว์เซอร์ เฟรมเวิร์ก NextJS จะ ส่งไฟล์เฉพาะเจาะจงไปยังเบราว์เซอร์ ที่สอดคล้องกับ URL นั้น
การกำหนดเส้นทางใน NextJS จัดระบบในแบบพิเศษ
สาระสำคัญของมันคือ ทุกๆ
URL ที่ร้องขอจะสอดคล้องกับ
โฟลเดอร์ภายใน src/app
โดยภายในโฟลเดอร์นั้นต้องมี
ไฟล์ชื่อ page.jsx
ไฟล์นี้แหละที่จะถูกส่ง
ไปยังเบราว์เซอร์ และในไฟล์นี้เรา
จะเขียนโค้ดด้วย JSX และในเบราว์เซอร์
จะได้รับโค้ด HTML สำเร็จรูปของหน้าเว็บ
ลองดูตัวอย่างกัน
สมมติว่าเราต้องการให้ที่ URL /test/
แสดงข้อความบางอย่าง
สร้างโฟลเดอร์ที่สอดคล้อง: src/app/test
ภายในโฟลเดอร์นี้สร้างไฟล์ page.jsx
ด้วยเนื้อหาดังต่อไปนี้:
export default function Test() {
return <h1>hello, user!</h1>;
}
เปิดเบราว์เซอร์ไปที่ URL ของเรา: /test และคุณจะเห็นข้อความที่เราเขียนไว้ภายใน ไฟล์ JSX
ลองเปลี่ยนข้อความและบันทึก ไฟล์ดู หลังจากนั้นข้อความจะ เปลี่ยนไปโดยอัตโนมัติในเบราว์เซอร์ด้วย นี่คือการทำงาน ของ NextJS ในโหมดพัฒนา
ทำให้เมื่อเข้าถึงที่อยู่
/about เบราว์เซอร์จะแสดง
ข้อความพร้อมชื่อและ
นามสกุลของคุณ
