ถ้าพูดถึง Next.js หลายคนคงนึกถึง Frontend Framework ที่ช่วยพัฒนาเว็บได้เร็วและแรง แต่รู้หรือเปล่าว่า Next.js ก็มี Backend ในตัว ด้วย?
ใช่แล้ว! Next.js มาพร้อมกับ API Routes ที่ให้เราสร้าง Backend API ได้ง่าย ๆ โดยไม่ต้องใช้ Express, NestJS หรือพวก Backend Framework อื่น ๆ
ในบทความนี้ เราจะมาทำความรู้จัก API Routes ใน Next.js ว่ามันคืออะไร ใช้งานยังไง และมีประโยชน์อะไรบ้าง ถ้าพร้อมแล้วไปลุยกันเลย! 🚀
🤔 API Routes คืออะไร?
API Routes คือฟีเจอร์ของ Next.js ที่ให้เราสร้าง REST API ได้โดยตรงในโปรเจกต์ Next.js เอง โดยไม่ต้องเซ็ตเซิร์ฟเวอร์แยก
📌 ข้อดีของ API Routes
✅ ไม่ต้องใช้ Backend แยก – Next.js จัดการให้
✅ ใช้ JavaScript/TypeScript ล้วน ๆ – ไม่ต้องเรียนรู้ภาษาใหม่
✅ รองรับ Serverless Functions – ทำงานบน Vercel, AWS Lambda, Firebase Functions ได้เลย
✅ ใช้ร่วมกับ Frontend ง่าย – อยู่ในโปรเจกต์เดียวกัน
ถ้าเทียบกับการใช้ Node.js + Express ที่ต้องเซ็ตเซิร์ฟเวอร์เอง API Routes ของ Next.js จะง่ายกว่าเยอะ!
🛠 สร้าง API Routes แรกของคุณ
ใน Next.js ไฟล์ API Routes จะอยู่ใน /pages/api/ เช่น
📂 โครงสร้างโฟลเดอร์
my-next-app/
├── pages/
│ ├── index.js
│ ├── about.js
│ ├── api/ <-- โฟลเดอร์ API
│ │ ├── hello.js <-- ไฟล์ API Route
│ │ ├── users.js
│ │ ├── posts.js
ลองสร้างไฟล์ /pages/api/hello.js แล้วใส่โค้ดนี้ลงไป
export default function handler(req, res) {
res.status(200).json({ message: 'สวัสดีจาก API Routes!' })
}
✨ ลองรันเซิร์ฟเวอร์
npm run dev
# หรือ
yarn dev
แล้วเข้า http://localhost:3000/api/hello จะได้ JSON แบบนี้
{
"message": "สวัสดีจาก API Routes!"
}
ง่ายมากใช่ไหม? ไม่ต้องติดตั้ง Express หรือเซ็ต Server อะไรให้ยุ่งยากเลย!
🚀 การใช้ HTTP Methods (GET, POST, PUT, DELETE)
API Routes รองรับทุก HTTP Method เช่น GET, POST, PUT, DELETE โดยเช็คจาก req.method
✨ ตัวอย่าง API รองรับหลาย Method
ไฟล์ /pages/api/users.js
export default function handler(req, res) {
if (req.method === 'GET') {
res.status(200).json({ users: ['Alice', 'Bob', 'Charlie'] })
} else if (req.method === 'POST') {
res.status(201).json({ message: 'สร้างผู้ใช้ใหม่เรียบร้อย!' })
} else {
res.status(405).json({ error: 'Method ไม่รองรับ' })
}
}
🔹 GET → ดึงข้อมูลผู้ใช้
🔹 POST → สร้างผู้ใช้ใหม่
🔹 อื่น ๆ → ส่ง 405 Method Not Allowed
ลองยิง API ดู! 🚀
curl -X GET http://localhost:3000/api/users
curl -X POST http://localhost:3000/api/users
🔄 อ่านค่า Query Parameters
ถ้าต้องการดึงค่าจาก Query String (เช่น /api/user?id=123) เราสามารถใช้ req.query ได้เลย
ไฟล์ /pages/api/user.js
export default function handler(req, res) {
const { id } = req.query
if (!id) {
return res.status(400).json({ error: 'กรุณาระบุ id' })
}
res.status(200).json({ user: { id, name: 'John Doe' } })
}
✨ ทดสอบ API
curl http://localhost:3000/api/user?id=456
📌 output
{
"user": { "id": "456", "name": "John Doe" }
}
📬 รับข้อมูลจาก Body (POST Method)
ถ้าต้องการรับข้อมูลจาก Body ของ Request เช่นเวลาส่งฟอร์มหรือ JSON Data เราสามารถใช้ req.body ได้เลย
ไฟล์ /pages/api/login.js
export default function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method ไม่รองรับ' })
}
const { username, password } = req.body
if (username === 'admin' && password === '1234') {
res.status(200).json({ message: 'เข้าสู่ระบบสำเร็จ!' })
} else {
res.status(401).json({ error: 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง' })
}
}
✨ ทดสอบ API
curl -X POST http://localhost:3000/api/login -H "Content-Type: application/json" -d '{"username": "admin", "password": "1234"}'
📌 output
{
"message": "เข้าสู่ระบบสำเร็จ!"
}
🔒 ใช้ Middleware กับ API Routes
ถ้าต้องการตรวจสอบ JWT Token หรือทำ Authentication ก่อนเข้าถึง API สามารถใช้ Middleware ได้ง่าย ๆ
ไฟล์ /pages/api/secure.js
export default function handler(req, res) {
const { authorization } = req.headers
if (!authorization || authorization !== 'Bearer mysecrettoken') {
return res.status(403).json({ error: 'ไม่ได้รับอนุญาต' })
}
res.status(200).json({ message: 'เข้าถึงข้อมูลสำเร็จ!' })
}
✨ ทดสอบ API (ล้มเหลว)
curl http://localhost:3000/api/secure
📌 output
{
"error": "ไม่ได้รับอนุญาต"
}
✨ ทดสอบ API (สำเร็จ)
curl -H "Authorization: Bearer mysecrettoken" http://localhost:3000/api/secure
📌 output
{
"message": "เข้าถึงข้อมูลสำเร็จ!"
}
🎯 สรุป
API Routes เป็นฟีเจอร์ที่ช่วยให้เราสร้าง Backend API ใน Next.js ได้ง่าย ๆ โดยไม่ต้องติดตั้งเซิร์ฟเวอร์แยก เหมาะกับการทำงานแบบ Fullstack ที่ต้องการพัฒนา Frontend และ Backend ไปพร้อมกัน
📌 จุดเด่นของ API Routes
✅ ใช้งานง่าย – ไม่ต้องเซ็ตเซิร์ฟเวอร์เอง
✅ รองรับ HTTP Methods (GET, POST, PUT, DELETE)
✅ ใช้ Query Parameters และ Request Body ได้
✅ รองรับ Middleware เช่น Authentication
ถ้าคุณใช้ Next.js อยู่แล้ว ลองใช้ API Routes ดู แล้วจะรู้ว่ามัน โคตรสะดวก! 🚀
ไม่มีความคิดเห็น:
แสดงความคิดเห็น