Middleware Dasar

KENAPA middleware ada?

Bayangkan kamu punya 20 halaman dashboard dan setiap halaman harus mengecek: "Apakah user sudah login?" Tanpa middleware, kamu menulis pengecekan yang sama 20 kali. Lupa satu saja, ada lubang keamanan.

Middleware menyelesaikan ini dengan satu pintu pemeriksaan. File middleware.ts di root project berjalan sebelum request mencapai route mana pun. Satu tempat untuk aturan yang berlaku ke banyak halaman: cek login, redirect URL lama, atau menulis ulang URL.

Contoh 1: auth guard untuk dashboard

// middleware.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 && req.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

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

Alurnya sederhana: ambil cookie token, kalau tidak ada dan user menuju /dashboard, lempar ke /login. Kalau lolos, NextResponse.next() membiarkan request lanjut seperti biasa. Perhatikan matcher di bawah: tanpa itu middleware berjalan untuk semua request termasuk gambar dan file statis, boros (detailnya di modul berikutnya).

Contoh 2: redirect dan rewrite

Middleware punya tiga aksi, dan dua di antaranya sering tertukar:

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

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

  // Redirect: URL lama -> URL baru, address bar ikut berubah
  if (url.pathname === "/blog-lama") {
    url.pathname = "/blog";
    return NextResponse.redirect(url, 308);
  }

  // Rewrite: tampilkan konten lain TANPA mengubah address bar
  if (url.pathname.startsWith("/promo")) {
    url.pathname = "/landing-promo";
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

Redirect cocok untuk URL yang sudah tidak dipakai (memberi tahu browser dan Google alamat barunya). Rewrite cocok untuk kasus seperti A/B testing atau menyajikan halaman promo di URL cantik tanpa memindahkan file.

Batasan: Edge Runtime

Middleware berjalan di Edge Runtime: super cepat dan dekat dengan user, tapi terbatas. Tidak semua Node.js API tersedia, dan kamu tidak bisa melakukan query database yang berat di sini.

Contoh yang konkret: kamu tidak bisa memakai fs untuk membaca file, tidak bisa membuka koneksi database langsung dengan driver Node seperti pg, dan tidak bisa memakai library yang bergantung pada API Node yang tidak tersedia. Kalau butuh data user yang lengkap, pola yang benar adalah: middleware hanya memastikan cookie ada, lalu halaman atau API-nya yang melakukan query database.

Selain itu, jaga middleware tetap ramping. Setiap milidetik di middleware menambah latensi ke SEMUA request yang melewatinya, jadi hindari komputasi berat, fetch berantai, atau regex raksasa. Aturan mainnya: di middleware cukup cek hal yang ringan seperti cookie atau token. Verifikasi yang butuh database (apakah session ini valid?) tetap dilakukan di Server Component atau Route Handler. Strategi dua lapis ini dibahas tuntas di modul proteksi route.