📚 รู้จักกับ Middleware
😰 ถ้าไม่มี Middleware จะเกิดอะไรขึ้น?
🚨 ปัญหาที่อาจเกิด:
- คนเลวเข้ามาง่าย
ไม่มีการตรวจสอบใครเป็นใคร
- เซิร์ฟเวอร์ล่มง่าย
คนเข้ามาพร้อมกันมากเกินไป
- ข้อมูลรั่วไหล
ไม่มีการป้องกันการโจมตี
💸 ผลกระทบ:
- ค่าใช้จ่ายเพิ่มขึ้น
- ลูกค้าไม่พอใจ
- เสียชื่อเสียง
🔄 Middleware ทำงานอย่างไร?
✅ ข้อดีของ Middleware
- เร็วมาก
ทำงานที่ Edge (ใกล้ผู้ใช้)
- ตรวจสอบก่อน
เช็คสิทธิ์ก่อนเข้าหน้าเว็บ
- ปลอดภัย
ป้องกันการโจมตีได้ดี
- ยืดหยุ่น
ปรับแต่งได้ตามต้องการ
🔄 ขั้นตอนการทำงาน (เข้าใจง่าย)
1. 👤 ลูกค้าเข้าเว็บไซต์
เหมือนเดินเข้าร้าน↓
2. 🛡️ Middleware ตรวจสอบ
ยามรักษาความปลอดภัยเช็ค↓
3. ✅ ได้เข้าหน้าเว็บ
ผ่านการตรวจสอบแล้ว📁 ไฟล์ที่ต้องรู้จักจับ (สำหรับมือใหม่)
🏗️ โครงสร้างโปรเจค Next.js พร้อม Middleware:
my-website/ 👈 โปรเจคของคุณ ├── middleware.ts 👈 ⭐ ไฟล์สำคัญ! (ยามรักษาความปลอดภัย) ├── src/ │ ├── app/ │ │ ├── page.tsx 👈 หน้าแรก │ │ ├── about/ │ │ │ └── page.tsx 👈 หน้า About │ │ └── api/ │ │ └── route.ts 👈 API endpoints │ └── components/ └── next.config.js 👈 การตั้งค่า Next.js
🚀 ตัวอย่างแรก: Middleware ง่ายๆ
มาสร้าง Middleware ตัวแรกที่จะทักทายทุกคนที่เข้าเว็บไซต์:
// middleware.ts (สร้างไฟล์นี้ใน root ของโปรเจค)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// ฟังก์ชันที่จะทำงานทุกครั้งที่มีคนเข้าเว็บไซต์
export function middleware(request: NextRequest) {
// พิมพ์ข้อความใน console (ดูได้ใน terminal)
console.log('🎉 มีคนเข้าเว็บไซต์!', request.nextUrl.pathname)
// บอกให้ไปต่อได้ (ไม่ปฏิเสธ)
return NextResponse.next()
}
// กำหนดว่า middleware นี้จะทำงานกับ path ไหนบ้าง
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
// หมายความ: ทำงานกับทุกหน้า ยกเว้น api, static files
}