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

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

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

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

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

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

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

app/(auth)/reg/page.jsxexport default function Reg() {
  return <h1>ลงทะเบียน</h1>;
}

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

app/(auth)/log/page.jsxexport default function Log() {
  return <h1>เข้าสู่ระบบ</h1>;
}