Konsep Middleware
Middleware pada Next.js 13 adalah sebuah konsep yang memungkinkan kode untuk dijalankan sebelum permintaan lain selesai. Dengan memodifikasi respons berdasarkan permintaan yang masuk, Kita dapat menulis ulang, mengarahkan, memodifikasi header permintaan atau respons, atau bahkan merespons secara langsung
Middleware berjalan sebelum konten yang di-cache dan rute dicocokkan. Dengan middleware, Kita dapat menulis logika server yang kompleks dan menjalankannya dengan aman di server, tanpa harus membuat rute API secara manual.
Berikut adalah contoh sederhana middleware di Next.js:
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}Cara Menggunakan Middleware
Untuk menggunakan middleware, Kita perlu membuat file bernama middleware.js atau middleware.ts pada level yang sama dengan direktori app atau root applikasi
Buat sebuah pada root project denagn nama middleware.ts :
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
export function middleware(request: NextRequest) {
const authHeader = request.headers.get("Authorization");
const getHeader = request;
const pathname = request.nextUrl.pathname;
console.log("Request HEADER: ", getHeader);
// console.log("Request for pathname Middelware: ", pathname);
console.log("Auth Token: ", authHeader);
// Check if a user has access...
if (!authHeader) {
return NextResponse.json({ message: 'Unauthorized' });
}
return NextResponse.next();
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api/auth/login (API routes)
* - api/auth/register (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
"/((?!api/auth/login|api/auth/register|_next/static|_next/image|favicon.ico).*)",
],
};Sepeti contoh diatas, maka setiap routes aplikasi diakses akan menjalankan middleware dengan pengecualian routes seperti matcher diatas seperti api/auth/login dan api/auth/register karena kita tidak perlul mengirimkan token saat menjalankan login atau register.
Kita juga mengecek header Authorization, Dimana jika header authorization tidak ada maka kita return sebuah respon {message:’Unauthorized’}. Hal ini berguna jika kita membuat sebuah autentikasi resource data kita.
Happy Coding!
