在 Next.js 專案中使用中間件

中間件是透過在專案根目錄建立middleware.ts檔案來實現(xiàn)的。 此文件定義了一個中間件函數(shù)和（可選）一個匹配器。

中介軟體功能

中間件函數(shù)包含中介軟體邏輯。 它接受 request 作為輸入並返回 response.

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

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

將請求重新導(dǎo)向到 /dashboard 的範(fàn)例，除非要求以 /api 開頭：

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

函數(shù)必須回傳：NextResponse.next()、NextResponse.redirect()、NextResponse.rewrite()、NextResponse.json() 或自訂 Response/NextResponse。

匹配器

匹配器決定中間件處理哪些請求。 它在 config 物件中定義：

export const config = {
  matcher: '/hello', // Matches only /hello
}

您可以使用陣列進行多個路由或使用正規(guī)表示式進行更複雜的匹配：

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

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

如果沒有匹配器，中間件將應(yīng)用於所有 路由，可能會影響效能。

組合多個中間件功能

Next.js 僅支援一個中間件檔案。 要使用多個函數(shù)，請建立單獨的函數(shù)並按順序呼叫它們，如果產(chǎn)生了回應(yīng)，則傳回回應(yīng)：

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Clerk 和 Next.js 中間件

職員透過提供clerkMiddleware簡化身分驗證：

export const config = {
  matcher: '/hello', // Matches only /hello
}

這處理 cookie 解析和使用者驗證。 您可以使用自訂邏輯來擴展它：

export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}

Next.js 中間件的限制

• 邊緣運行時約束：中間件在邊緣運行時運行，限制可用的 API 和庫。 不允許存取檔案系統(tǒng)。

• 大小限制：中間件函數(shù)限制為 1MB。

• 僅限 ES 模組： 僅支援 ES 模組。

• 無字串求值： eval 和 new Function(evalString) 不允許。

• 效能注意事項：複雜的中間件會對效能產(chǎn)生負面影響。 通常不鼓勵在中間件內(nèi)存取資料庫。

• 對請求/回應(yīng)的有限存?。?/strong>中間件沒有對請求和回應(yīng)物件的完全存取權(quán)。