Next.js middleware ใช้สำหรับอะไร?

Question

Accepted Answer

**Middleware** คือโค้ดที่ทำงาน **ก่อนที่คำขอจะเสร็จสิ้น** — บน Edge ก่อนที่หน้าหรือ route handler จะแสดงผล ช่วยให้คุณตรวจสอบและเขียนใหม่/เปลี่ยนเส้นทางคำขอ ตั้งค่าส่วนหัว หรือตรวจสอบการยืนยันตัวตนสำหรับหลายเส้นทางในที่เดียว

## การกำหนด middleware

```ts
// middleware.ts (at the project root)
import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const token = req.cookies.get("session")?.value;

// protect /dashboard — redirect unauthenticated users to login
  if (req.nextUrl.pathname.startsWith("/dashboard") && !token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next(); // allow the request to proceed
}

// only run on these paths (performance — don't run on every asset)
export const config = { matcher: ["/dashboard/:path*", "/account/:path*"] };
```

## Middleware สามารถทำได้อะไร

```ts
NextResponse.redirect(url);          // send the user elsewhere (auth gates)
NextResponse.rewrite(url);           // serve different content, URL unchanged (A/B, i18n)
NextResponse.next();                  // continue, optionally with modified headers
// req.geo / req.cookies / req.headers — inspect location, auth, etc.
```

การใช้งานทั่วไป: **การตรวจสอบการยืนยันตัวตน**, **การเปลี่ยนเส้นทาง** (ตามภาษา/ตำแหน่งทางภูมิศาสตร์ www→apex) **การทดสอบ A/B** โดยการเขียนใหม่ การตั้งค่า **ส่วนหัวความปลอดภัย** และ bot/feature flags

## ข้อจำกัดสำคัญ

```text
⚠️ Runs on the EDGE runtime → no Node.js APIs (no fs, limited libraries)
⚠️ Must be FAST — it runs before every matched request; heavy work adds latency
⚠️ Can't access the database directly for complex auth — do lightweight checks
   (e.g. verify a JWT/cookie exists); do full auth in the page/handler
```

การตั้งค่า `matcher` มีความสำคัญ: จำกัด middleware ให้เฉพาะเส้นทางที่ต้องการเท่านั้น เพื่อไม่ให้ทำงานบนสินทรัพย์คงที่และทำให้ทุกอย่างช้า

## เหตุใดจึงสำคัญ

Middleware คือจุดควบคุมเดียวสำหรับตรรกะการขอตัดขวาง — การเปลี่ยนเส้นทางการยืนยันตัวตน การกำหนดเส้นทางภาษา การเขียนใหม่ และส่วนหัว — นำไปใช้กับหลายเส้นทางโดยไม่ต้องทำซ้ำโค้ดในแต่ละหน้า

การรู้ข้อจำกัดของ Edge (เร็ว ไม่มี Node APIs การตรวจสอบแบบง่าย) และการกำหนดขอบเขต `matcher` คือสิ่งที่ช่วยให้คุณใช้งานได้อย่างถูกต้องสำหรับการแยกและปัญหาการกำหนดเส้นทาง