ถ้าพูดถึง Middleware หลายคนอาจนึกถึง Express.js ที่ใช้ตรวจสอบ Request ก่อนส่งไปยัง Handler แต่รู้ไหมว่า Next.js ก็มี Middleware เป็นของตัวเอง!
Middleware ใน Next.js ช่วยให้เราสามารถ ควบคุมการเข้าถึงหน้าเว็บ, ตรวจสอบสิทธิ์ (Authentication), Redirect, และ Modify Request/Response ได้ก่อนที่ผู้ใช้จะเข้าถึงหน้าเว็บจริง ๆ
ในบทความนี้ เราจะมาดูกันว่า Middleware ใน Next.js คืออะไร ใช้งานยังไง และเราสามารถนำไปใช้ทำอะไรได้บ้าง 🛠️🚀
🔥 Middleware ใน Next.js คืออะไร?
Middleware คือ โค้ดที่ทำงานอยู่ระหว่าง Request และ Response หรือพูดง่าย ๆ ก็คือ มันช่วยให้เราสามารถจัดการ Request ก่อนที่มันจะไปถึง API หรือ Page จริง ๆ
Next.js Middleware ทำงานที่ Edge หรือที่เรียกว่า Edge Functions ซึ่งหมายความว่า
✅ ทำงานเร็วมาก เพราะไม่ต้องรอโหลดทั้งเซิร์ฟเวอร์
✅ ใช้งานได้กับทุก Request ที่เข้ามา
✅ ลดภาระของ API Routes และ getServerSideProps
📌 ข้อดีของ Middleware
- ตรวจสอบสิทธิ์ (Auth) ก่อนเข้าหน้าเว็บ
- กำหนดเงื่อนไขสำหรับแต่ละ Route
- Redirect หรือ Rewrite Request ได้
- บล็อกหรือแก้ไข Header ของ Request
🚀 วิธีใช้ Middleware ใน Next.js
Middleware ใน Next.js จะถูกเก็บไว้ที่ไฟล์ middleware.ts หรือ middleware.js ใน root ของโปรเจกต์
🔹 สร้าง Middleware แรกของคุณ
ไฟล์ middleware.ts
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
console.log('Middleware กำลังทำงาน...')
return NextResponse.next() // ให้ Request ผ่านไปยังหน้าปลายทาง
}
จากนั้นรันเซิร์ฟเวอร์
npm run dev
ทุกครั้งที่มี Request เข้ามา Middleware จะทำงานก่อนส่งไปที่ Page หรือ API
🔑 ตัวอย่างการใช้งาน Middleware
✨ 1. การ Redirect ผู้ใช้
บางครั้งเราต้องการให้ผู้ใช้ถูก Redirect ไปยังหน้าอื่น โดยอัตโนมัติ
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
const url = req.nextUrl
if (url.pathname === '/old-page') {
return NextResponse.redirect(new URL('/new-page', req.url))
}
return NextResponse.next()
}
✅ เมื่อผู้ใช้เข้าหน้า /old-page จะถูก Redirect ไปที่ /new-page อัตโนมัติ
🔐 2. ตรวจสอบสิทธิ์ก่อนเข้าหน้าเว็บ (Authentication)
สมมติว่าเรามีหน้า Dashboard ที่ต้องการให้เฉพาะผู้ใช้ที่ล็อกอินเข้าถึงได้
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
const token = req.cookies.get('auth_token')
if (!token) {
return NextResponse.redirect(new URL('/login', req.url))
}
return NextResponse.next()
}
✅ ถ้าไม่มี Token ผู้ใช้จะถูกส่งไปที่ /login ทันที
🌍 3. เช็คประเทศของผู้ใช้ แล้วเปลี่ยนภาษาอัตโนมัติ
ถ้าต้องการ เปลี่ยนภาษาเว็บตามประเทศของผู้ใช้ เราสามารถใช้ Middleware เช็ค IP แล้ว Redirect ไปยังหน้าที่เหมาะสม
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
const country = req.geo?.country || 'US' // ดึงค่าประเทศจาก IP
if (country === 'TH') {
return NextResponse.redirect(new URL('/th', req.url)) // เปลี่ยนไปหน้าเวอร์ชันภาษาไทย
}
return NextResponse.next()
}
✅ ถ้าผู้ใช้มาจากไทย จะถูกส่งไปที่ /th อัตโนมัติ
🔄 4. เปลี่ยน Headers ของ Request
บางครั้งเราต้องการ เพิ่ม Headers หรือแก้ไข Headers ก่อนส่งไปยัง API หรือ Page
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
const response = NextResponse.next()
response.headers.set('X-Custom-Header', 'HelloMiddleware')
return response
}
✅ เพิ่ม Header X-Custom-Header: HelloMiddleware ในทุก Response
🛠 การกำหนด Middleware ให้ทำงานเฉพาะบางหน้า
บางครั้งเราอาจต้องการให้ Middleware ทำงาน แค่บางหน้า ไม่ใช่ทั้งหมด สามารถใช้ config.matcher ได้
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
return NextResponse.next()
}
// ใช้ Middleware เฉพาะบาง Route
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
}
✅ Middleware จะทำงานเฉพาะหน้า /dashboard และ /profile เท่านั้น
📌 Middleware กับ API Routes ต่างกันยังไง?
| Feature | Middleware | API Routes |
|---|---|---|
| ทำงานเมื่อไหร่? | ก่อนส่งไปยัง Page หรือ API | เมื่อมีการเรียก API |
| ทำอะไรได้บ้าง? | Redirect, Auth, Modify Request | รับ-ส่งข้อมูล API |
| ทำงานที่ไหน? | Edge (เร็วมาก) | Server (ปกติ) |
| ใช้เมื่อไหร่? | ตรวจสอบสิทธิ์, Redirect, แก้ไข Headers | สร้าง API สำหรับแอป |
- ถ้าต้องการ ดัก Request ก่อนถึงหน้าเว็บ → ใช้ Middleware
- ถ้าต้องการ สร้าง API Endpoint สำหรับแอป → ใช้ API Routes
🎯 สรุป
Middleware ใน Next.js เป็นเครื่องมือที่ทรงพลังที่ช่วยให้เราสามารถ
✅ Redirect ผู้ใช้ ไปยังหน้าที่เหมาะสม
✅ ตรวจสอบสิทธิ์ ก่อนเข้าถึงข้อมูล
✅ เปลี่ยน Headers ของ Request/Response
✅ ตรวจสอบ IP, Geo Location และเปลี่ยนภาษาเว็บอัตโนมัติ
🔥 ถ้าโปรเจกต์ของคุณต้องการควบคุม Request ก่อนถึงหน้าเว็บ Middleware คือสิ่งที่คุณต้องใช้! 🚀
