การใช้งาน Middleware ใน Next.js

Middleware คือ Function ที่เราเขียนขึ้นเพื่อปรับเปลี่ยน Request และ Response ถือว่าเป็น Feature ที่จำเป็นต้องมีในทุกๆ Framework ซึ่งใน Next.js ก็จะมี Middleware ให้เราใช้เช่นกัน

Middleware ใน Next.js เป็นฟีเจอร์ที่ช่วยให้สามารถปรับเปลี่ยน request และ response ก่อนที่จะแสดงผล ซึ่ง Middleware ทำงานระดับ Edge Function ซึ่งช่วยให้สามารถประมวลผลได้อย่างรวดเร็วโดยไม่ต้องโหลดหน้าใหม่

การใช้งาน Middleware ใน Next.js

Middleware ใน Next.js สามารถใช้เพื่อ:

• ตรวจสอบสิทธิ์การเข้าถึงของผู้ใช้ (Authentication & Authorization)
• Block หรือ Redirect request ตามเงื่อนไขที่กำหนด
• ปรับเปลี่ยน Response headers
• ดำเนินการ A/B Testing หรือการทำ Localization

วิธีสร้าง Middleware ใน Next.js

เราสามารถเพิ่ม Middleware เข้ามาในโปรเจ็กต์ Next.js โดยการสร้างไฟล์ middleware.ts หรือ middleware.js ที่ root ของโปรเจ็กต์ หลังจากนั้นเขียนโค้ดดังต่อไปนี้

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const url = req.nextUrl;

  // ตัวอย่าง: ถ้าต้องการเข้าหน้า Dashboard เราต้อง Login ก่อน
  const token = req.cookies.get('auth_token');
  if (!token && url.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  return NextResponse.next();
}

การตั้งค่า Matcher

ค่า matcher ใช้สำหรับระบุเส้นทางที่ Middleware ควรทำงาน สามารถใช้รูปแบบของเส้นทางที่กำหนดเองได้ เช่น:

• "/dashboard/:path*" ใช้กับทุกหน้าใน /dashboard
• "/admin/:path*" ใช้กับทุกหน้าใน /admin

// กำหนดเส้นทางที่ Middleware จะทำงาน
export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*'],
};

การใช้ Middleware กับ Headers และ Cookies

เราสามารถใช้ Middleware เพื่อปรับแต่ง headers และ cookies ตามที่เราต้องการได้ เช่น

export function middleware(req: NextRequest) {
  const res = NextResponse.next();
  res.headers.set('X-Custom-Header', 'Hello from Middleware');
  return res;
}

การทำ Authentication

เราสามารถใช้ middleware กับ API Routes เพื่อทำ Authentication โดยใช้ next-auth หรือ jsonwebtoken (JWT) ได้

import jwt from "jsonwebtoken";

export default function handler(req, res) {
  const { token } = req.headers;
  
  if (!token) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    res.status(200).json({ message: "Access granted", user: decoded });
  } catch (error) {
    res.status(401).json({ message: "Invalid token" });
  }
}

ข้อดีของ Next.js Middleware

1. ลดเวลาโหลดหน้า เพราะสามารถทำงานที่ edge และตอบสนองได้เร็ว
2. เพิ่มความปลอดภัย สามารถใช้ตรวจสอบ request ก่อนเข้าถึงหน้าเว็บ
3. ควบคุมเส้นทางแบบ Dynamic สามารถเปลี่ยนเส้นทางตาม logic ที่กำหนดไว้ได้

สรุป

Middleware ถือว่าเป็นฟีเจอร์ที่มีประโยชน์มากๆใน Next.js เพราะใน Application จริงเราจำเป็นต้องมีการตรวจสอบสิทธิ์, เปลี่ยนเส้นทาง, ปรับแต่ง headers หรือทำ A/B Testing อยู่แล้ว

หากคุณกำลังพัฒนาเว็บแอปด้วย Next.js และต้องการควบคุม request/response ให้เป็นไปตามความต้องการ ให้นึกถึง Middleware