Nextjs Middleware Matcher Chaining Config Matcher Nextresponse

Definisi

middleware.ts berjalan sebelum route di-render. config.matcher membatasi middleware ke path tertentu (pakai regex/array), dan NextResponse.next() / NextResponse.redirect() mengontrol alur. Beberapa middleware bisa dipisah per folder (advanced) atau di-chain dalam satu file.

Kapan dipakai

Pakai untuk auth check, redirect locale, A/B test, atau header注入 di tepi (edge). Gunakan matcher agar middleware tidak jalan di aset statis (_next, favicon) yang memperlambat.

Cara kerja

matcher

ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(req: NextRequest) {
  const token = req.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  return NextResponse.next();
}
 
export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*'], // hanya path ini
};

Inject header

ts

const res = NextResponse.next();
res.headers.set('x-request-id', crypto.randomUUID());
return res;

Struktur alur

Catatan implementasi

• matcher bisa array atau regex; hindari matcher: '/:path*' (semua) kecuali memang perlu.
• Jangan jalankan DB query berat di middleware (edge runtime terbatas); cukup cek token/JWT.
• NextResponse.redirect butuh absolute URL (new URL).
• Untuk multiple middleware, bagi ke folder middleware (experimental) atau chain logika dalam satu fungsi.

Kesalahan umum

• Tanpa matcher: middleware jalan di semua aset, lambat.
• Redirect ke relative: harus absolute URL.
• Baca cookie secret tanpa verify: cek signature, jangan percaya mentah.
• Logic berat di edge: runtime terbatas; pindahkan ke route handler.

Referensi terkait

• Next.js Middleware, Edge Runtime, Image Optimization, Redirect/Rewrites
• Next.js Instrumentation, Middleware Auth, Edge vs Node
• Laravel Middleware: Request/Response, Validation Flow