Middleware: Gerbang Sebelum Request Masuk

Apa itu middleware?

Middleware adalah fungsi yang berjalan sebelum request mencapai halaman atau API. Ia berjalan di edge (dekat user), jadi cepat. Kegunaan klasik: cek login, redirect, dan menulis ulang URL.

Membuat middleware

Buat file middleware.ts di root project (sejajar app/):

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

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

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

  return NextResponse.next();
}

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

matcher menentukan path mana yang melewati middleware. Tanpa matcher, middleware jalan di semua request termasuk file statis, dan itu boros.

Kasus umum

• Proteksi halaman. Redirect ke login kalau tidak ada cookie sesi.
• Redirect domain. Mengarahkan domain lama ke domain baru.
• A/B testing. Menulis ulang URL ke varian halaman berbeda.
• Geolokasi. Menampilkan konten berdasarkan negara pengunjung.

Batasan penting

Middleware berjalan di edge runtime yang ringan: tidak semua API Node.js tersedia. Jangan lakukan query database berat atau komputasi lama di sini. Tugasnya hanya keputusan cepat: boleh lewat atau redirect.

Kesalahan umum pemula

• Tanpa matcher. Middleware jalan di semua request termasuk gambar dan file statis. Ini boros dan memperlambat segalanya.
• Query database berat di middleware. Edge runtime itu ringan dan cepat untuk keputusan sederhana, bukan untuk komputasi berat.
• Mengandalkan middleware sebagai satu-satunya proteksi. Middleware bisa di-bypass dalam skenario tertentu. Halaman sensitif tetap harus verifikasi sesi di Server Component juga.

Latihan singkat

1. Buat middleware yang me-redirect /lama ke /baru secara permanen, dengan matcher yang tepat.
2. Tambahkan proteksi /admin/*: tanpa cookie admin=true, redirect ke /login. Uji dengan mode incognito.

Rangkuman

• Middleware berjalan di edge sebelum request mencapai halaman: cepat untuk keputusan sederhana.
• File middleware.ts di root project plus config.matcher untuk membatasi path.
• Cocok untuk proteksi route, redirect, dan A/B testing.
• Jangan lakukan komputasi berat atau query database di sini.

Catatan teknis: Middleware tidak bisa membaca body request POST atau state React. Ia hanya melihat URL, header, dan cookie. Logika yang butuh data dari database sebaiknya dilakukan di halaman atau Server Action, bukan di middleware.