Middleware di Next.js
Penjelasan
middleware.js (WAJIB di root project, sejajar dengan folder app/) dijalankan SEBELUM request mencapai route mana pun yang cocok dengan matcher-nya — dipakai untuk hal seperti cek autentikasi, redirect berdasarkan kondisi, atau modifikasi header, mirip middleware di Express.js/Laravel tapi berjalan di edge runtime Next.js.
Contoh Konsep
// middleware.js (di root project)
import { NextResponse } from 'next/server';
export function middleware(request) {
const sudahLogin = request.cookies.has('session_token');
if (!sudahLogin && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next(); // lanjut ke route tujuan
}
export const config = {
matcher: '/dashboard/:path*', // cuma jalan untuk route ini
};Praktikum
Buat middleware.js yang mengecek cookie 'session_token'. Kalau tidak ada dan path-nya diawali '/admin', redirect ke '/login'. Tulis juga config matcher supaya middleware ini cuma berjalan untuk path '/admin/:path*'.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
TANPA config.matcher, middleware akan berjalan untuk SEMUA request di seluruh aplikasi (termasuk file statis, gambar, dst), yang biasanya tidak diinginkan dan memperlambat — selalu batasi cakupannya lewat matcher supaya cuma jalan di path yang benar-benar butuh.