การจัดกลุ่มเส้นทางใน NextJS

บางครั้งเพื่อความสะดวก เราอาจต้องการ จัดกลุ่มเส้นทางหลายๆ เส้นทางไว้ในโฟลเดอร์เดียวกัน โดยที่โฟลเดอร์ที่ใช้จัดกลุ่มไม่สร้าง ส่วนแยกเพิ่มใน URL

เพื่อทำสิ่งนี้ ให้ใส่ชื่อโฟลเดอร์ที่ใช้จัดกลุ่ม ไว้ในวงเล็บกลม มาดูตัวอย่างกัน

สมมติว่าเราต้องการให้ URL /reg ใช้สำหรับการลงทะเบียน และ URL /log สำหรับการเข้าสู่ระบบ ให้รวมโฟลเดอร์ที่สอดคล้องกับ URL เหล่านี้ ไว้ในโฟลเดอร์ทั่วไปชื่อ (auth)

ด้วยวิธีนี้ เราจะได้โครงสร้างไฟล์ดังนี้:

/app/
- /(auth)/
  - /reg/
    - page.jsx
  - /log/
    - page.jsx

มาสร้างไฟล์สำหรับหน้าลงทะเบียน:

export default function Reg() {
	return <h1>ลงทะเบียน</h1>;
}

มาสร้างไฟล์สำหรับหน้าเข้าสู่ระบบ:

export default function Log() {
	return <h1>เข้าสู่ระบบ</h1>;
}

ให้ทำตามขั้นตอนที่อธิบายไว้ในบทเรียน ตรวจสอบให้แน่ใจว่าทุกอย่างทำงานตามที่คาดไว้