Middleware (Next.js)

TL;DR: Middleware Next.js adalah lapisan kode yang dijalankan sebelum request sampai ke halaman atau endpoint. Ia berjalan di edge, dekat dengan pengguna, dan biasa dipakai untuk redirect, cek login, geo-targeting, atau eksperimen A/B tanpa membebani halaman utama.

Apa itu Middleware Next.js?

Middleware Next.js adalah file middleware.ts di root proyek yang mencegat setiap request masuk sebelum diproses lebih lanjut. Anggap saja seperti petugas resepsionis di lobi: setiap tamu disapa dulu, diarahkan, atau diminta identitas, sebelum boleh masuk ke ruangan yang dituju. Karena berjalan di edge function, middleware mengeksekusi logika ini sangat dekat dengan lokasi pengguna sehingga latensinya rendah.

Middleware bekerja berbeda dari route handler yang memproses isi request. Middleware lebih ke penjaga gerbang: ia memutuskan apakah request lanjut, dialihkan, atau ditolak.

Kasus Pakai Umum

• Autentikasi: cek token sebelum membuka halaman privat
• Redirect berbasis lokasi atau bahasa, pendukung strategi hreflang
• A/B testing: arahkan sebagian pengunjung ke varian halaman
• Proteksi rute admin dan rate limiting dasar

Kenapa Penting?

Bagi marketer, middleware membuka personalisasi tanpa memperlambat halaman. Misalnya menampilkan penawaran berbeda untuk pengunjung dari kota tertentu, atau menjalankan eksperimen konversi. Dalam praktik pengembangan website bisnis, saya memakai middleware untuk memisahkan trafik pengguna login dan tamu agar caching halaman publik tetap optimal. Yang perlu diingat, middleware sebaiknya tetap ringan karena ia berjalan di setiap request.

Pertanyaan Umum

Apakah middleware memperlambat website?

Jika logikanya ringan, dampaknya minim karena berjalan di edge. Masalah muncul bila middleware memanggil database berat pada setiap request.

Apa beda middleware dan API route?

Middleware mencegat dan mengarahkan request sebelum mencapai tujuan, sedangkan API route atau route handler memproses dan mengembalikan data.