Creating routes with App Router

---

ในบทความนี้ เราจะมาดูวิธีการสร้างเส้นทางด้วย App Router ใน Next.js พร้อมกับตัวอย่างและการอธิบายขั้นตอนอย่างละเอียด เพื่อให้คุณสามารถเริ่มต้นสร้างแอปพลิเคชันที่มีโครงสร้างเส้นทางที่ซับซ้อนและมีประสิทธิภาพได้

การสร้างเส้นทางแบบพื้นฐาน

Next.js ใช้ระบบการจัดการเส้นทางแบบไฟล์ ซึ่งไฟล์แต่ละไฟล์ในไดเรกทอรี pages จะกลายเป็นเส้นทางอัตโนมัติ ดังนั้นการสร้างหน้าใหม่ในแอปพลิเคชันของคุณสามารถทำได้ง่ายๆ ด้วยการสร้างไฟล์ใหม่ในไดเรกทอรี pages

ตัวอย่าง

สมมติว่าเรามีโฟลเดอร์โปรเจค Next.js ที่มีโครงสร้างดังนี้:

my-next-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── contact.js

• index.js: หน้าแรกของแอปพลิเคชัน ซึ่งสามารถเข้าถึงได้ที่ URL http://localhost:3000/

• about.js: หน้าเกี่ยวกับ ซึ่งสามารถเข้าถึงได้ที่ URL http://localhost:3000/about

• contact.js: หน้าติดต่อ ซึ่งสามารถเข้าถึงได้ที่ URL http://localhost:3000/contact

// pages/index.js
export default function Home() {
  return <h1>Welcome to the Home Page</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

// pages/contact.js
export default function Contact() {
  return <h1>Contact Us</h1>;
}

การสร้างเส้นทางไดนามิก

นอกจากการสร้างเส้นทางแบบพื้นฐานแล้ว Next.js ยังรองรับการสร้างเส้นทางไดนามิกที่ช่วยให้คุณสามารถจัดการเส้นทางที่มีพารามิเตอร์แบบไดนามิกได้ เช่น การสร้างหน้าโปรไฟล์ของผู้ใช้ตาม id ของ user โดยกำหนดค่าที่ต้องการให้ไดนามิกในภายใน [] เช่น [id]

โด

ตัวอย่าง

สมมติว่าเราต้องการสร้างหน้าโปรไฟล์ผู้ใช้ที่สามารถเข้าถึงได้โดยใช้ URL แบบไดนามิก เช่น http://localhost:3000/user/123

my-next-app/
├── pages/
│   ├── user/
│   │   └── [id].js

// pages/user/[id].js
import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>User Profile for ID: {id}</h1>;
}