M

MLOG

Tiếng Việt

Khám phá các kỹ thuật sửa đổi request nâng cao bằng middleware của Next.js. Tìm hiểu cách xử lý định tuyến phức tạp, xác thực, thử nghiệm A/B và các chiến lược bản địa hóa cho ứng dụng web mạnh mẽ.

Các Trường Hợp Cận Biên của Middleware Next.js: Làm Chủ Các Mẫu Sửa Đổi Request

Middleware của Next.js cung cấp một cơ chế mạnh mẽ để chặn và sửa đổi các request trước khi chúng đến các route của ứng dụng. Khả năng này mở ra một loạt các khả năng, từ việc kiểm tra xác thực đơn giản đến các kịch bản thử nghiệm A/B phức tạp và các chiến lược quốc tế hóa. Tuy nhiên, việc tận dụng hiệu quả middleware đòi hỏi sự hiểu biết sâu sắc về các trường hợp cận biên và những cạm bẫy tiềm ẩn của nó. Hướng dẫn toàn diện này khám phá các mẫu sửa đổi request nâng cao, cung cấp các ví dụ thực tế và những hiểu biết có thể hành động để giúp bạn xây dựng các ứng dụng Next.js mạnh mẽ và hiệu suất cao.

Hiểu Rõ Các Nguyên Tắc Cơ Bản của Middleware Next.js

Trước khi đi sâu vào các mẫu nâng cao, hãy cùng tóm tắt lại những điều cơ bản về middleware của Next.js. Các hàm middleware được thực thi trước khi một request được hoàn thành, cho phép bạn:

Các hàm middleware nằm trong tệp middleware.js hoặc middleware.ts trong thư mục /pages hoặc /app của bạn (tùy thuộc vào phiên bản và thiết lập Next.js của bạn). Chúng nhận một đối tượng NextRequest đại diện cho request đến và có thể trả về một đối tượng NextResponse để kiểm soát hành vi tiếp theo.

Ví dụ: Middleware Xác Thực Cơ Bản

Ví dụ này minh họa một kiểm tra xác thực đơn giản. Nếu người dùng chưa được xác thực (ví dụ: không có token hợp lệ trong cookie), họ sẽ được chuyển hướng đến trang đăng nhập.


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

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

  if (!authToken) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

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

Middleware này sẽ chỉ chạy cho các route khớp với /protected/:path*. Nó kiểm tra sự tồn tại của cookie authToken. Nếu cookie bị thiếu, người dùng sẽ được chuyển hướng đến trang /login. Nếu không, request được phép tiếp tục bình thường bằng cách sử dụng NextResponse.next().

Các Mẫu Sửa Đổi Request Nâng Cao

Bây giờ, hãy cùng khám phá một số mẫu sửa đổi request nâng cao thể hiện sức mạnh thực sự của middleware Next.js.

1. Thử nghiệm A/B với Cookies

Thử nghiệm A/B là một kỹ thuật quan trọng để tối ưu hóa trải nghiệm người dùng. Middleware có thể được sử dụng để gán ngẫu nhiên người dùng vào các biến thể khác nhau của ứng dụng của bạn và theo dõi hành vi của họ. Mẫu này dựa vào cookie để duy trì biến thể được gán cho người dùng.

Ví dụ: Thử nghiệm A/B cho Trang Đích


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

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

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

  if (!variant) {
    // Randomly assign a variant
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

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

Trong ví dụ này, khi người dùng truy cập đường dẫn gốc (/) lần đầu tiên, middleware sẽ gán ngẫu nhiên họ vào variantA hoặc variantB. Biến thể này được lưu trữ trong một cookie. Các request tiếp theo từ cùng một người dùng sẽ được viết lại thành /variant-a hoặc /variant-b, tùy thuộc vào biến thể được gán của họ. Điều này cho phép bạn phục vụ các trang đích khác nhau và theo dõi trang nào hoạt động tốt hơn. Hãy đảm bảo bạn đã định nghĩa các route cho /variant-a và /variant-b trong ứng dụng Next.js của mình.

Những Lưu Ý Toàn Cầu: Khi thực hiện thử nghiệm A/B, hãy xem xét các biến thể theo vùng. Một thiết kế gây được tiếng vang ở Bắc Mỹ có thể không hiệu quả ở châu Á. Bạn có thể sử dụng dữ liệu định vị địa lý (thu được thông qua tra cứu địa chỉ IP hoặc sở thích của người dùng) để điều chỉnh thử nghiệm A/B cho các khu vực cụ thể.

2. Bản địa hóa (i18n) với URL Rewrites

Quốc tế hóa (i18n) là điều cần thiết để tiếp cận khán giả toàn cầu. Middleware có thể được sử dụng để tự động phát hiện ngôn ngữ ưa thích của người dùng và chuyển hướng họ đến phiên bản địa phương hóa phù hợp của trang web của bạn.

Ví dụ: Chuyển hướng dựa trên Header `Accept-Language`


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

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Check if there's an existing locale in the pathname
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ],
}

Middleware này trích xuất header Accept-Language từ request và xác định ngôn ngữ ưa thích của người dùng. Nếu URL chưa chứa tiền tố ngôn ngữ (ví dụ: /en/about), middleware sẽ chuyển hướng người dùng đến URL địa phương hóa phù hợp (ví dụ: /fr/about cho tiếng Pháp). Hãy chắc chắn rằng bạn có cấu trúc thư mục phù hợp trong thư mục `/pages` hoặc `/app` của mình cho các ngôn ngữ khác nhau. Ví dụ, bạn sẽ cần một tệp `/pages/en/about.js` và `/pages/fr/about.js`.

Những Lưu Ý Toàn Cầu: Đảm bảo việc triển khai i18n của bạn xử lý đúng các ngôn ngữ từ phải sang trái (ví dụ: tiếng Ả Rập, tiếng Do Thái). Ngoài ra, hãy xem xét sử dụng Mạng phân phối nội dung (CDN) để phục vụ các tài sản địa phương hóa từ các máy chủ gần người dùng hơn, cải thiện hiệu suất.

3. Cờ Tính Năng (Feature Flags)

Cờ tính năng cho phép bạn bật hoặc tắt các tính năng trong ứng dụng của mình mà không cần triển khai mã mới. Điều này đặc biệt hữu ích để tung ra các tính năng mới dần dần hoặc để thử nghiệm các tính năng trong môi trường sản xuất. Middleware có thể được sử dụng để kiểm tra trạng thái của một cờ tính năng và sửa đổi request cho phù hợp.

Ví dụ: Kích hoạt Tính năng Beta


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

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Optionally redirect to a "feature unavailable" page
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

export const config = {
  matcher: ['/new-feature/:path*'],
}

Middleware này kiểm tra giá trị của biến môi trường BETA_FEATURE_ENABLED. Nếu nó được đặt thành true và người dùng đang cố gắng truy cập một route dưới /new-feature, request sẽ được phép tiếp tục. Nếu không, người dùng sẽ được chuyển hướng đến trang /feature-unavailable. Hãy nhớ cấu hình các biến môi trường một cách thích hợp cho các môi trường khác nhau (phát triển, staging, sản xuất).

Những Lưu Ý Toàn Cầu: Khi sử dụng cờ tính năng, hãy xem xét các tác động pháp lý của việc kích hoạt các tính năng có thể không tuân thủ các quy định ở tất cả các khu vực. Ví dụ, các tính năng liên quan đến quyền riêng tư dữ liệu có thể cần phải bị vô hiệu hóa ở một số quốc gia.

4. Nhận diện Thiết bị và Định tuyến Thích ứng

Các ứng dụng web hiện đại cần phải đáp ứng và thích ứng với các kích thước màn hình và khả năng thiết bị khác nhau. Middleware có thể được sử dụng để phát hiện loại thiết bị của người dùng và chuyển hướng họ đến các phiên bản tối ưu hóa của trang web của bạn.

Ví dụ: Chuyển hướng người dùng di động đến một subdomain được tối ưu hóa cho di động


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

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

Ví dụ này sử dụng thư viện `detection` để xác định loại thiết bị của người dùng dựa trên header User-Agent. Nếu người dùng đang sử dụng điện thoại di động, họ sẽ được chuyển hướng đến subdomain m.example.com (giả sử bạn có một phiên bản trang web được tối ưu hóa cho di động được lưu trữ ở đó). Hãy nhớ cài đặt gói `detection`: `npm install detection`.

Những Lưu Ý Toàn Cầu: Đảm bảo logic nhận diện thiết bị của bạn tính đến các biến thể khu vực trong việc sử dụng thiết bị. Ví dụ, điện thoại phổ thông vẫn còn phổ biến ở một số nước đang phát triển. Hãy xem xét sử dụng kết hợp giữa nhận diện User-Agent và các kỹ thuật thiết kế đáp ứng để có một giải pháp mạnh mẽ hơn.

5. Làm giàu Header của Request

Middleware có thể thêm thông tin vào header của request trước khi nó được xử lý bởi các route ứng dụng của bạn. Điều này hữu ích để thêm siêu dữ liệu tùy chỉnh, chẳng hạn như vai trò người dùng, trạng thái xác thực hoặc ID request, có thể được sử dụng bởi logic ứng dụng của bạn.

Ví dụ: Thêm ID cho Request 


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Only apply to API routes
}

Middleware này tạo ra một ID request duy nhất bằng cách sử dụng thư viện uuid và thêm nó vào header x-request-id. ID này sau đó có thể được sử dụng cho mục đích ghi nhật ký, truy vết và gỡ lỗi. Hãy nhớ cài đặt gói `uuid`: `npm install uuid`.

Những Lưu Ý Toàn Cầu: Khi thêm các header tùy chỉnh, hãy lưu ý đến giới hạn kích thước của header. Vượt quá các giới hạn này có thể dẫn đến các lỗi không mong muốn. Ngoài ra, hãy đảm bảo rằng mọi thông tin nhạy cảm được thêm vào header đều được bảo vệ đúng cách, đặc biệt nếu ứng dụng của bạn nằm sau một reverse proxy hoặc CDN.

6. Cải thiện Bảo mật: Giới hạn Tần suất (Rate Limiting)

Middleware có thể hoạt động như một tuyến phòng thủ đầu tiên chống lại các cuộc tấn công độc hại bằng cách triển khai giới hạn tần suất. Điều này ngăn chặn việc lạm dụng bằng cách giới hạn số lượng request mà một client có thể thực hiện trong một khoảng thời gian cụ thể.

Ví dụ: Giới hạn Tần suất Cơ bản sử dụng một Kho lưu trữ Đơn giản


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

const requestCounts: { [ip: string]: number } = {}
const WINDOW_SIZE_MS = 60000; // 1 minute
const MAX_REQUESTS_PER_WINDOW = 100;

export function middleware(request: NextRequest) {
  const clientIP = request.ip || '127.0.0.1' // Get client IP, default to localhost for local testing

  if (!requestCounts[clientIP]) {
    requestCounts[clientIP] = 0;
  }

  requestCounts[clientIP]++;

  if (requestCounts[clientIP] > MAX_REQUESTS_PER_WINDOW) {
    return new NextResponse(
      JSON.stringify({ message: 'Too many requests' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Reset count after window
  setTimeout(() => {
    requestCounts[clientIP]--;
    if (requestCounts[clientIP] <= 0) {
        delete requestCounts[clientIP];
    }
  }, WINDOW_SIZE_MS);

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'], // Apply to all API routes
}

Ví dụ này duy trì một kho lưu trữ đơn giản trong bộ nhớ (requestCounts) để theo dõi số lượng request từ mỗi địa chỉ IP. Nếu một client vượt quá MAX_REQUESTS_PER_WINDOW trong vòng WINDOW_SIZE_MS, middleware sẽ trả về lỗi 429 Too Many Requests. Quan trọng: Đây là một ví dụ đơn giản hóa và không phù hợp cho môi trường sản xuất vì nó không có khả năng mở rộng và dễ bị tấn công từ chối dịch vụ. Để sử dụng trong sản xuất, hãy xem xét sử dụng một giải pháp giới hạn tần suất mạnh mẽ hơn như Redis hoặc một dịch vụ giới hạn tần suất chuyên dụng.

Những Lưu Ý Toàn Cầu: Các chiến lược giới hạn tần suất nên được điều chỉnh cho phù hợp với các đặc điểm cụ thể của ứng dụng của bạn và sự phân bố địa lý của người dùng. Hãy xem xét sử dụng các giới hạn tần suất khác nhau cho các khu vực hoặc phân khúc người dùng khác nhau.

Các Trường Hợp Cận Biên và Cạm Bẫy Tiềm Ẩn

Mặc dù middleware là một công cụ mạnh mẽ, điều cần thiết là phải nhận thức được những hạn chế và cạm bẫy tiềm ẩn của nó:

Các Thực Hành Tốt Nhất khi Sử dụng Middleware của Next.js

Để tối đa hóa lợi ích của middleware Next.js và tránh các vấn đề tiềm ẩn, hãy làm theo các thực hành tốt nhất sau:

Kết luận

Middleware của Next.js cung cấp một cách mạnh mẽ để sửa đổi các request và tùy chỉnh hành vi của ứng dụng của bạn ở biên. Bằng cách hiểu các mẫu sửa đổi request nâng cao được thảo luận trong hướng dẫn này, bạn có thể xây dựng các ứng dụng Next.js mạnh mẽ, hiệu suất cao và nhận thức toàn cầu. Hãy nhớ xem xét cẩn thận các trường hợp cận biên và những cạm bẫy tiềm ẩn, và tuân theo các thực hành tốt nhất được nêu ở trên để đảm bảo rằng các hàm middleware của bạn đáng tin cậy và có thể bảo trì. Hãy tận dụng sức mạnh của middleware để tạo ra những trải nghiệm người dùng đặc biệt và mở ra những khả năng mới cho các ứng dụng web của bạn.