[Next.js Tutorial] Middleware: Hướng dẫn cách dùng với các ví dụ thực tế

Trong thế giới phát triển web hiện đại với Next.js, việc xử lý các request trước khi chúng đến được trang hoặc API là một nhu cầu thiết yếu. Đây chính là lúc Middleware tỏa sáng, đóng vai trò như một "người gác cổng" thông minh và linh hoạt, cho phép bạn kiểm soát, sửa đổi và điều hướng luồng dữ liệu một cách hiệu quả.

Bài viết này sẽ giúp bạn khám phá về Middleware trong Next.js chi tiết từ A-Z: nó là gì, tại sao nó quan trọng, và làm thế nào để khai thác tối đa sức mạnh của nó.

1. Middleware trong Next.js là gì? 💡

Hãy tưởng tượng ứng dụng Next.js của bạn là một tòa nhà sang trọng. Trước khi một vị khách (request) có thể vào một căn phòng cụ thể (trang hoặc API), họ phải đi qua một người gác cổng (Middleware) tại sảnh chính. Người gác cổng này có quyền:

• Kiểm tra giấy tờ: Xác thực xem khách có được phép vào hay không (Authentication).
• Chỉ dẫn đường đi: Hướng khách đến một căn phòng khác phù hợp hơn (Redirects/Rewrites).
• Ghi lại thông tin: Ghi lại thời gian khách ra vào (Logging).
• Yêu cầu thêm thông tin: Thêm một số "huy hiệu" đặc biệt vào thẻ của khách trước khi họ vào phòng (Modifying headers).

Về mặt kỹ thuật, Middleware trong Next.js là một đoạn mã được thực thi trên máy chủ (cụ thể là trên Edge Runtime) trước khi một request được hoàn thành. Nó cho phép bạn chạy code trước khi một trang hoặc API route được hiển thị. Bằng cách này, bạn có thể thay đổi response dựa trên request của người dùng.

File để định nghĩa Middleware rất đơn giản: bạn chỉ cần tạo một file middleware.ts (hoặc .js) trong thư mục gốc (root) của dự án.

2. Tại sao Middleware lại là "Game Changer"? 🤔

Sự ra đời của Middleware đã thay đổi cuộc chơi trong kiến trúc Next.js vì những lý do sau:

• Tốc độ và hiệu suất vượt trội: Middleware chạy trên Edge Runtime của Vercel. Đây là một môi trường JavaScript siêu nhẹ, được triển khai trên các máy chủ toàn cầu (Edge Network). Điều này có nghĩa là code của bạn được thực thi ở vị trí địa lý gần với người dùng nhất, giúp giảm độ trễ (latency) xuống mức tối thiểu. Việc này nhanh hơn rất nhiều so với việc phải "đánh thức" cả một môi trường Node.js chỉ để xử lý một vài logic đơn giản.
• Tập trung Logic: Thay vì phải viết đi viết lại cùng một đoạn code kiểm tra xác thực ở nhiều trang khác nhau, bạn có thể gom tất cả vào một file Middleware duy nhất. Điều này giúp code sạch sẽ, dễ bảo trì và mở rộng.
• Trải nghiệm người dùng mượt mà: Bạn có thể cá nhân hóa nội dung hoặc điều hướng người dùng một cách liền mạch mà không cần chờ đợi phía client-side JavaScript tải xong. Ví dụ, chuyển hướng người dùng dựa trên vị trí địa lý của họ ngay lập tức.
• Bảo mật tăng cường: Middleware là lớp phòng thủ đầu tiên của bạn. Nó có thể chặn các request đáng ngờ, kiểm tra token xác thực, hoặc giới hạn truy cập vào các tài nguyên nhạy cảm trước khi chúng kịp "chạm" đến logic chính của ứng dụng.

3. Tính năng của Middleware: Những ứng dụng thực tế 🚀

Vậy cụ thể, bạn có thể dùng Middleware để làm gì? Dưới đây là những trường hợp sử dụng phổ biến và mạnh mẽ nhất.

a. Xác thực (Authentication)

Đây là ứng dụng kinh điển nhất. Bạn có thể kiểm tra xem người dùng đã đăng nhập hay chưa bằng cách kiểm tra cookie hoặc token trong header. Nếu chưa, hãy chuyển hướng họ đến trang đăng nhập.

Ví dụ: Dựng phần xác thực đơn giản.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('auth-token')?.value

  // Nếu không có token và người dùng đang cố truy cập trang dashboard
  if (!authToken && request.nextUrl.pathname.startsWith('/dashboard')) {
    const loginUrl = new URL('/login', request.url)
    return NextResponse.redirect(loginUrl)
  }

  return NextResponse.next()
}

// Chỉ áp dụng middleware cho các route cụ thể
export const config = {
  matcher: ['/dashboard/:path*'],
}

b. A/B Testing và Feature Flags

Bạn muốn thử nghiệm một tính năng mới với một nhóm nhỏ người dùng? Middleware là công cụ hoàn hảo. Dựa vào cookie hoặc các thông số khác, bạn có thể "viết lại" (rewrite) URL để hiển thị cho người dùng phiên bản A hoặc phiên bản B của một trang mà không làm thay đổi URL trên trình duyệt.

Ví dụ: Thử nghiệm một tính năng mới.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

  if (bucket === 'new-feature') {
    // Viết lại URL để hiển thị trang mới nhưng giữ nguyên URL gốc
    return NextResponse.rewrite(new URL('/new-home', request.url))
  }

  return NextResponse.next()
}

c. Quốc tế hóa (Internationalization - i18n)

Middleware có thể tự động phát hiện ngôn ngữ ưa thích của người dùng từ header Accept-Language hoặc vị trí địa lý (thông qua request.geo) và chuyển hướng họ đến phiên bản ngôn ngữ phù hợp của trang (ví dụ: /en/about hoặc /vi/about).

Ví dụ: Tự động phát hiện ngôn ngữ của người dùng.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const locales = ['en', 'vi', 'jp']

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
  )

  if (pathnameHasLocale) return

  // Mặc định chuyển về tiếng Việt
  const locale = 'vi'
  request.nextUrl.pathname = `/${locale}${pathname}`
  return NextResponse.redirect(request.nextUrl)
}

export const config = {
  matcher: [
    // Bỏ qua các đường dẫn nội bộ và file tĩnh
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

d. Ghi log và Phân tích (Logging & Analytics)

Trước khi request được xử lý, bạn có thể ghi lại các thông tin quan trọng như đường dẫn truy cập, thời gian, vị trí địa lý của người dùng để phục vụ cho việc phân tích và theo dõi lỗi.

4. Cấu hình và Tối ưu Middleware (Matcher)

Không phải lúc nào bạn cũng muốn Middleware chạy trên mọi request. Điều này sẽ ảnh hưởng đến hiệu suất. Next.js cung cấp một đối tượng config với thuộc tính matcher để bạn chỉ định chính xác những đường dẫn nào sẽ kích hoạt Middleware.

// middleware.ts
export const config = {
  // Có thể dùng chuỗi đơn, mảng chuỗi hoặc biểu thức chính quy (regex)
  matcher: [
    /*
     * Khớp với tất cả các đường dẫn, ngoại trừ các đường dẫn bắt đầu bằng:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

Việc sử dụng matcher đúng cách là cực kỳ quan trọng để đảm bảo Middleware chỉ chạy khi cần thiết, giúp ứng dụng của bạn luôn nhanh và hiệu quả.

5. Những giới hạn cần biết của Middleware

Mặc dù mạnh mẽ, Middleware trên Edge Runtime cũng có một số giới hạn:

• Không hỗ trợ đầy đủ Node.js APIs: Vì không chạy trên môi trường Node.js truyền thống, một số API của Node.js (như tương tác trực tiếp với file hệ thống fs) sẽ không khả dụng.
• Thời gian thực thi: Có giới hạn về thời gian thực thi để đảm bảo hiệu suất. Logic của bạn cần phải gọn nhẹ và nhanh chóng.
• Kích thước gói tin: Code Middleware của bạn có giới hạn về kích thước.

Tuy nhiên, với hầu hết các trường hợp sử dụng như xác thực, điều hướng, hay A/B testing, những giới hạn này hoàn toàn không phải là vấn đề.

Kết luận: Nắm vững Middleware, làm chủ Next.js

Middleware không chỉ là một tính năng; đó là một sự thay đổi trong tư duy kiến trúc ứng dụng Next.js. Nó mang lại sức mạnh xử lý logic ở tầng biên (edge), giúp tạo ra các ứng dụng nhanh hơn, an toàn hơn và mang lại trải nghiệm người dùng cá nhân hóa cao độ.

Bằng cách hiểu rõ và áp dụng Middleware một cách thông minh, bạn đã nắm trong tay một trong những công cụ mạnh mẽ nhất để nâng tầm các dự án Next.js của mình. Hãy bắt đầu tích hợp "người gác cổng" đa năng này vào ứng dụng của bạn ngay hôm nay!