Middleware, Security & Authentication Flow — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

File middleware.ts diletakkan di root proyek untuk mencegat setiap HTTP Request
Berjalan di Edge Runtime sebelum request mencapai Server Components / Page
Digunakan untuk proteksi rute terautentikasi (Protected Routes), I18n, & Header security

🛡️ Arsitektur Next.js Middleware

Middleware dieksekusi sebelum request diproses oleh render engine. Ini sangat ideal untuk memeriksa apakah cookie sesi autentikasi pengguna valid sebelum mengizinkan akses ke rute /dashboard.

💻 Kode Contoh middleware.ts

middleware.ts

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

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

  // Jika mencoba akses dashboard tanpa token, redirect ke login
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"],
};