Middleware và Edge Functions trong Next.js

Middleware và Edge Functions là những công cụ mạnh mẽ trong Next.js giúp bạn kiểm soát luồng xử lý trước khi trang được render. Bạn có thể dùng middleware để chặn truy cập, redirect, thêm headers, hoặc xử lý ngôn ngữ người dùng. Edge Functions thì phù hợp với các tác vụ nhanh, nhẹ như auth, geo redirect, xử lý dữ liệu đơn giản – đặc biệt hiệu quả vì được chạy gần người dùng, giảm độ trễ.

Middleware và Edge Functions

1. Tạo Middleware cơ bản

Tạo file middleware.ts trong thư mục gốc (nếu dùng App Router):

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const loggedIn = request.cookies.get('session')?.value;

  if (!loggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// Áp dụng middleware cho toàn bộ hoặc chỉ vài route
export const config = {
  matcher: ['/dashboard/:path*'],
};

Ứng dụng: redirect người dùng nếu chưa đăng nhập.

2. Locale detection (phát hiện ngôn ngữ người dùng)

export function middleware(request: NextRequest) {
  const { nextUrl, headers } = request;

  const acceptLang = headers.get('accept-language');
  const locale = acceptLang?.startsWith('vi') ? 'vi' : 'en';

  if (nextUrl.pathname === '/') {
    return NextResponse.redirect(new URL(`/${locale}`, request.url));
  }

  return NextResponse.next();
}

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

Dễ dàng tạo redirect tự động về /vi hoặc /en tùy trình duyệt.

3. Thêm headers qua middleware

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  response.headers.set('X-Custom-Header', 'Next-Middleware');
  return response;
}

Có thể dùng để thêm header bảo mật, kiểm soát cache...

4. Giới thiệu Edge Functions

Edge Functions là các hàm serverless chạy gần người dùng (edge locations), có độ trễ rất thấp.

Ví dụ:

// app/api/hello/route.ts (default đã là Edge Function)
export const runtime = 'edge';

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello from the Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Tốt cho auth nhẹ, geo redirect, AB testing, hoặc xử lý input nhanh.

So sánh:

Kết luận

Middleware và Edge Functions là những công cụ cực kỳ linh hoạt của Next.js 13+ giúp bạn:

• Bảo vệ route và kiểm soát flow ứng dụng
• Hỗ trợ SEO với ngôn ngữ phù hợp
• Xử lý nhanh gọn, ít độ trễ cho logic nhẹ

Chúng giúp nâng cấp app từ "chỉ render" sang "điều khiển toàn bộ luồng truy cập" – một bước tiến gần hơn đến ứng dụng production chuyên nghiệp.