ถ้าคุณเป็นสายเว็บที่อยากเขียนเว็บเร็ว ๆ ไม่ต้องมานั่งเซ็ต Routing เองให้ปวดหัว Next.js คือเพื่อนที่คุณต้องการ! หนึ่งในฟีเจอร์เด็ดของมันคือการใช้โฟลเดอร์ pages/ เพื่อสร้าง Routing แบบอัตโนมัติ ที่จะทำให้ชีวิตของคุณง่ายขึ้น ไม่ต้องมานั่งเขียนไฟล์ routes.js หรือกำหนด path เองแบบสมัยก่อน
บทความนี้จะพาคุณไปทำความเข้าใจว่า โฟลเดอร์ pages/ ใน Next.js ทำงานยังไง, จะใช้มันให้เกิดประโยชน์สูงสุดได้ยังไง, และ ถ้าคุณอยากใช้ Dynamic Routing หรือ API Routes ต้องทำยังไง มาเริ่มกันเลย!
พื้นฐานของโฟลเดอร์ pages/
ใน Next.js โฟลเดอร์ pages/ เป็นศูนย์กลางของระบบ Routing ทั้งหมด มันทำงานง่าย ๆ คือ "มีไฟล์อะไรใน pages/ ก็จะมี URL ตามไฟล์นั้น" เช่น
- pages/index.js → /
- pages/about.js → /about
- pages/contact.js → /contact
แค่สร้างไฟล์ .js หรือ .tsx ในโฟลเดอร์นี้ Next.js ก็จะสร้างเส้นทางให้โดยอัตโนมัติ ไม่ต้องเขียนโค้ดอะไรเพิ่ม!
ตัวอย่างไฟล์ pages/about.js
export default function AboutPage() {
return <h1>นี่คือหน้า About</h1>;
}
พอสร้างไฟล์นี้เสร็จ คุณสามารถเข้าเว็บที่ /about ได้เลยโดยไม่ต้องตั้งค่าอะไรเพิ่ม!
สร้าง Routing อัตโนมัติแบบง่าย ๆ
การสร้างหน้าใหม่
ถ้าอยากเพิ่มหน้าใหม่ ก็แค่สร้างไฟล์ใหม่ใน pages/ เท่านั้น เช่น
mkdir pages/blog
touch pages/blog/index.js
จากนั้นเพิ่มโค้ดง่าย ๆ
export default function BlogPage() {
return <h1>ยินดีต้อนรับสู่หน้า Blog!</h1>;
}
แค่นี้คุณก็สามารถเข้าหน้า /blog ได้แล้ว ไม่ต้องไปแก้ไขอะไรเพิ่มเติมเลย
Dynamic Routing: เส้นทางที่ยืดหยุ่นกว่านี้มีอีกไหม? มี!
สมมติว่าคุณอยากสร้างหน้า Blog ที่สามารถรองรับโพสต์หลาย ๆ อัน เช่น /blog/post-1, /blog/post-2 โดยไม่ต้องสร้างไฟล์ใหม่ให้แต่ละโพสต์เอง เราสามารถใช้ Dynamic Routing ได้โดยใช้เครื่องหมาย [] ในชื่อไฟล์
ตัวอย่าง:
สร้างไฟล์ pages/blog/[slug].js
import { useRouter } from 'next/router';
export default function BlogPostPage() {
const router = useRouter();
const { slug } = router.query;
return <h1>กำลังอ่านบทความ: {slug}</h1>;
}
เมื่อมีคนเข้าไปที่ /blog/my-first-post หรือ /blog/hello-world ค่า {slug} จะเปลี่ยนไปตาม URL อัตโนมัติ
API Routes: ใช้ pages/api/ เพื่อสร้าง API ง่าย ๆ
Next.js ไม่ได้ใช้ pages/ แค่สำหรับสร้างหน้าเว็บเท่านั้น มันยังสามารถใช้สำหรับสร้าง API ได้อีกด้วย!
ถ้าคุณสร้างไฟล์ pages/api/hello.js และเขียนโค้ดแบบนี้:
export default function handler(req, res) {
res.status(200).json({ message: "Hello from API!" });
}
ตอนนี้คุณสามารถเรียก API นี้ได้ที่ /api/hello โดยไม่ต้องตั้งค่าเพิ่ม
Middleware และการ Redirect Routing
ถ้าคุณอยากควบคุม Routing แบบละเอียดขึ้น Next.js ก็มีเครื่องมือให้ เช่น Middleware และ Redirects
Middleware ช่วยให้คุณสามารถจัดการกับ Request ก่อนที่มันจะไปถึงหน้าเว็บ เช่น ตรวจสอบสิทธิ์การเข้าถึง
ตัวอย่าง Middleware
สร้างไฟล์ middleware.js
import { NextResponse } from "next/server";
export function middleware(req) {
const url = req.nextUrl.clone();
if (!req.cookies.auth) {
url.pathname = "/login";
return NextResponse.redirect(url);
}
return NextResponse.next();
}
จากนั้นกำหนดให้ Middleware ทำงานใน next.config.js
module.exports = {
async redirects() {
return [
{
source: "/old-page",
destination: "/new-page",
permanent: true,
},
];
},
};
ข้อดีของระบบ Routing อัตโนมัติใน Next.js
- ลดโค้ดที่ต้องเขียน – ไม่ต้องมานั่งเซ็ตเส้นทางเอง
- SEO-Friendly – เส้นทางแบบ Static และ Dynamic ทำงานได้ดี
- มี API Routes ในตัว – ไม่ต้องแยก Backend ออกมาเอง
- รองรับ Dynamic Routing – เหมาะกับเว็บที่มีเนื้อหาหลายหน้า
- สรุป: Next.js ทำให้ Routing ง่ายขึ้นเยอะ!
ระบบ Routing ใน Next.js ออกแบบมาให้ใช้ง่ายสุด ๆ แค่สร้างไฟล์ในโฟลเดอร์ pages/ ก็สามารถเข้าถึง URL นั้นได้เลย ไม่ต้องตั้งค่าอะไรเพิ่มเติม
ถ้าคุณต้องการ Routing ที่ซับซ้อนขึ้น เช่น Dynamic Routes หรือ API Routes Next.js ก็รองรับทั้งหมดโดยไม่ต้องพึ่ง Third-party library เลย
พร้อมจะใช้ Next.js ในโปรเจกต์ของคุณหรือยัง? ถ้าพร้อมแล้ว ลองเล่นกับ pages/ ดูเลย แล้วคุณจะติดใจ!
ไม่มีความคิดเห็น:
แสดงความคิดเห็น