Middleware trong Next.js

Middleware trong Next.js là một class đặc biệt, nó hoạt động giữa request (yêu cầu) của người dùng và response (phản hồi) từ server. Bạn dùng middleware để kiểm soát request trước khi nó được xử lý bởi các route trong ứng dụng.

Middleware rất hữu ích trong các trường hợp sau: Xác thực người dùng trước khi truy cập vào một trang nào đó . Hoặc khi cần redirect (chuyển hướng) dựa trên điều kiện, hoặc khi cần thêm header vào request hoặc response. Hoặc khi cần log tự động các request của user…

Tạo middleware.ts

Tạo middleware trong NextJS thì đơn giản thôi. Trong folder dự án, bạn tạo một file có tên là middleware.ts(nếu dùng typescript) hoặc middleware.js(nếu dùng javascript) rồi viết code trong đó.

Ví dụ, một middleware kiểm tra xác thực người dùng:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(req: NextRequest) {
  const token = req.cookies.get('token');
  if (!token) {
    return NextResponse.redirect(new URL('/dang-nhap', req.url));
  }
  return NextResponse.next();
}

Cấu hình matcher

Trong file middleware.ts, Bạn có thể chỉ định các route áp dụng middleware bằng cách sử dụng config:

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

Điều này có nghĩa là middleware chỉ áp dụng cho các trang trong /dashboard và /profile.

Một số trường hợp sử dụng Middleware

Redirect dựa trên ngôn ngữ

Bạn có thể tự động redirect người dùng dựa vào ngôn ngữ hiện tại của trình duyệt user đang dùng:

import { NextRequest, NextResponse } from "next/server";
export function middleware(req: NextRequest) {
  const locale = req.headers.get('accept-language')?.split(',')[0] || 'en';
  return NextResponse.redirect(new URL(`/${locale}`, req.url));
}

Thêm header vào response

Bạn có thể chỉnh sửa response bằng cách thêm header:

export function middleware(req: NextRequest) {
  const res = NextResponse.next();
  res.headers.set('X-Custom-Header', 'Xin chào');
  return res;
}

Kiểm soát các route thường và API bằng Bearer Token

Bạn có thể yêu cầu gửi Bearer Token trong HTTP header để xác thực trước khi truy cập vào một số route nhất định:

export function middleware(req: NextRequest) {
  const authHeader = req.headers.get('authorization');
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
  }
  const token = authHeader.split(' ')[1];
  if (!validToken(token)) {
    return NextResponse.json(
     { message: 'Forbidden' }, 
     { status: 403 });
  }
  return NextResponse.next();
}

// Hàm kiểm tra token hợp lệ
function validToken(token: string): boolean {
  // Ở đây bạn có thể gọi API hoặc kiểm tra token bằng JWT
  return token === 'valid_token_example';
}

Cấu hình middleware áp dụng cho API:

export const config = {
  matcher: ['/api/:path*'],
};

Bảo vệ trang /admin chỉ dành cho quản trị viên (vai_tro = 1)

Nếu bạn muốn bảo vệ các trang quản trị (thêm, sửa, xóa, danh sách ) để chỉ cho quản trị viên mới được truy cập, bạn có thể code middleware như sau:

import { NextRequest, NextResponse } from "next/server";
export async function middleware(req: NextRequest) {
  const token = req.cookies.get("token")?.value; // Lấy token từ cookie
  if (!token) { 
    return NextResponse.redirect(new URL("/dang-nhap", req.url)); // Chuyển hướng nếu chưa đăng nhập
  }
  const vai_tro= 1; // Giả sử role được xác định ở đâu đó
  if (vai_tro!== 1) { 
    return NextResponse.redirect(new URL("/unauthorized", req.url)); // Chặn nếu không có quyền
  }
  return NextResponse.next(); // Tiếp tục nếu hợp lệ
}
export const config = {
  matcher: ["/admin/:path*", ], //Middleware áp dụng cho các route này
};

Middleware trên giúp đảm bảo rằng chỉ những người dùng có vai_tro = 1 (Admin) mới có thể truy cập các trang /admin . Nếu không phải admin, họ sẽ bị chuyển hướng đến trang /unauthorized.

---

Middleware trong Next.js giúp kiểm soát request hiệu quả mà không cần xử lý trong từng route riêng lẻ. Việc sử dụng middleware có thể giúp bảo vệ trang, tối ưu trải nghiệm người dùng và kiểm soát luồng request tốt hơn. Muốn đẹc thêm mời xem https://nextjs.org/docs/app/building-your-application/routing/middleware