Next.js 中間件為應(yīng)用程序中的請求處理提供強(qiáng)大的自定義功能。 它允許攔截請求以執(zhí)行會(huì)話驗(yàn)證、日志記錄和緩存等操作。然而，低效的中間件實(shí)施會(huì)嚴(yán)重影響性能。本指南闡明了中間件功能和最佳實(shí)踐，幫助您了解何時(shí)以及如何有效地利用它。

什么是 Next.js 中間件？

Next.js 中間件包含針對每個(gè)傳入請求自動(dòng)執(zhí)行的函數(shù)。 這些函數(shù)在請求數(shù)據(jù)到達(dá)應(yīng)用程序的路由系統(tǒng)之前檢查和修改請求數(shù)據(jù)。 應(yīng)用程序包括身份驗(yàn)證、日志記錄和錯(cuò)誤管理。例如，中間件可以通過檢查令牌來驗(yàn)證用戶會(huì)話，防止未經(jīng)授權(quán)的訪問。

Next.js 中間件高度靈活且可定制。 您可以創(chuàng)建定制功能來滿足特定應(yīng)用程序需求，設(shè)置應(yīng)用程序范圍的設(shè)置或策略。這簡化了路由配置，避免了復(fù)雜的多層設(shè)置。 使用中間件可以產(chǎn)生更健壯、可擴(kuò)展且可維護(hù)的應(yīng)用程序。

Next.js 中間件處理順序

了解收到請求時(shí)的操作順序至關(guān)重要：

1. 標(biāo)頭： next.config.js 標(biāo)頭首先應(yīng)用，設(shè)置初始請求標(biāo)頭。這非常適合內(nèi)容安全策略 (CSP) 或 CORS 等安全標(biāo)頭。

2. 重定向： next.config.js 接下來處理重定向，將請求映射到不同的 URL。 這可以處理 URL 重寫和重定向，管理跨頁面或整個(gè)應(yīng)用程序的路由規(guī)則。

3. 中間件評估：在標(biāo)頭和重定向之后，評估中間件并執(zhí)行其邏輯。

4. 應(yīng)用

   beforeFiles: next.config.js beforeFiles（重寫），在路由之前啟用進(jìn)一步重寫或特定于文件的邏輯。

5. 文件系統(tǒng)路由： 處理應(yīng)用程序的文件系統(tǒng)路由（例如，public/、_next/static/、頁面和應(yīng)用程序）。 這里提供靜態(tài)文件。

6. afterFiles: next.config.js afterFiles（重寫）被應(yīng)用，在動(dòng)態(tài)路由之前提供最終修改點(diǎn)。

7. 動(dòng)態(tài)路由： 處理動(dòng)態(tài)路由（例如，/blog/[slug]）。 這些需要對變量或參數(shù)進(jìn)行特定的處理和重寫。

8. 后備： next.config.js 應(yīng)用后備，管理無法路由的請求。 這允許錯(cuò)誤處理程序或后備路由。

常見的 Next.js 中間件用例

• 身份驗(yàn)證：在訪問受保護(hù)的資源之前驗(yàn)證用戶憑據(jù)。 中間件可以檢查會(huì)話令牌，重定向未經(jīng)身份驗(yàn)證的用戶登錄。 店員有效地使用了這種方法。

• 日志記錄：通過將每個(gè)請求記錄到中央服務(wù)器進(jìn)行分析和調(diào)試來跟蹤應(yīng)用程序事件（用戶操作、錯(cuò)誤）。

• 數(shù)據(jù)獲取：（有限制）從 API 或數(shù)據(jù)庫加載數(shù)據(jù)以獲取最新信息。 請注意稍后討論的性能注意事項(xiàng)。

• 請求路由：自定義路由，將請求重定向到特定路徑或?qū)崿F(xiàn)捕獲所有錯(cuò)誤處理程序。

• 緩存：通過將經(jīng)常訪問的資源存儲(chǔ)在內(nèi)存中來提高性能，減少請求。 （原文提供示例代碼）

• 速率限制：監(jiān)控來自用戶或IP地址的請求，阻止過多的請求以保護(hù)后端資源。

• 頁面轉(zhuǎn)換：實(shí)時(shí)重寫 HTML 或轉(zhuǎn)換數(shù)據(jù)。 這對于圖像 URL 重寫或提供來自不同域的資源非常有用。

• 分析/報(bào)告：跟蹤用戶行為和應(yīng)用程序性能以進(jìn)行優(yōu)化。 中間件可以修改 cookie 以進(jìn)行第三方分析集成。

• 國際化：根據(jù)用戶區(qū)域設(shè)置以多種語言交付內(nèi)容（例如，使用 IP 地址或 HTTP 標(biāo)頭）。

在 Next.js 項(xiàng)目中使用中間件

中間件是通過在項(xiàng)目根目錄創(chuàng)建middleware.ts文件來實(shí)現(xiàn)的。 該文件定義了一個(gè)中間件函數(shù)和（可選）一個(gè)匹配器。

中間件功能

中間件函數(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()
}

將請求重定向到 /dashboard 的示例，除非請求以 /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
}

您可以使用數(shù)組進(jìn)行多個(gè)路由或使用正則表達(dá)式進(jìn)行更復(fù)雜的匹配：

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

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

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

組合多個(gè)中間件功能

Next.js 僅支持一個(gè)中間件文件。 要使用多個(gè)函數(shù)，請創(chuàng)建單獨(dú)的函數(shù)并按順序調(diào)用它們，如果生成了一個(gè)響應(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簡化身份驗(yàn)證：

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

這處理 cookie 解析和用戶驗(yàn)證。 您可以使用自定義邏輯擴(kuò)展它：

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

Next.js 中間件的局限性

• 邊緣運(yùn)行時(shí)約束：中間件在邊緣運(yùn)行時(shí)運(yùn)行，限制可用的 API 和庫。 不允許訪問文件系統(tǒng)。

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

• 僅限 ES 模塊： 僅支持 ES 模塊。

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

• 性能注意事項(xiàng)：復(fù)雜的中間件會(huì)對性能產(chǎn)生負(fù)面影響。 通常不鼓勵(lì)在中間件內(nèi)訪問數(shù)據(jù)庫。

• 對請求/響應(yīng)的有限訪問：中間件沒有對請求和響應(yīng)對象的完全訪問權(quán)限。

結(jié)論

本指南全面了解 Next.js 中間件、其功能、限制和最佳實(shí)踐。 請記住優(yōu)先考慮高效代碼以避免性能瓶頸。

以上是Next.js 中的中間件是什么的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！