Next.js 中的中間件是什麼

Next.js 中間件為應用程式中的請求處理提供強大的自訂功能。 它允許攔截請求以執行會話驗證、日誌記錄和快取等操作。然而，低效率的中間件實施會嚴重影響效能。本指南闡明了中間件功能和最佳實踐，幫助您了解何時以及如何有效地利用它。

什麼是 Next.js 中間件？

Next.js 中間件包含針對每個傳入請求自動執行的函數。 這些函數在請求資料到達應用程式的路由系統之前檢查和修改請求資料。 應用程式包括身份驗證、日誌記錄和錯誤管理。例如，中間件可以透過檢查令牌來驗證使用者會話，防止未經授權的存取。

Next.js 中間件高度靈活且可自訂。 您可以建立自訂功能來滿足特定應用程式需求，設定應用程式範圍的設定或策略。這簡化了路由配置，避免了複雜的多層設定。 使用中間件可以產生更健壯、可擴展且可維護的應用程式。

Next.js 中介軟體處理順序

了解收到請求時的操作順序至關重要：

1. 標頭： next.config.js 標頭先套用，設定初始請求標頭。這非常適合內容安全策略 (CSP) 或 CORS 等安全標頭。

2. 重新導向： next.config.js 接下來處理重新導向，將請求對應到不同的 URL。 這可以處理 URL 重寫和重定向，管理跨頁面或整個應用程式的路由規則。

3. 中介軟體評估：在標頭和重定向之後，評估中間件並執行其邏輯。

4. 應用

   beforeFiles: next.config.js beforeFiles（重寫），在路由之前啟用進一步重寫或特定於檔案的邏輯。

5. 檔案系統路由： 處理應用程式的檔案系統路由（例如，public/、_next/static/、頁面和應用程式）。 這裡提供靜態文件。

6. afterFiles: next.config.js afterFiles（重寫）被應用，在動態路由之前提供最終修改點。

7. 動態路由： 處理動態路由（例如，/blog/[slug]）。 這些需要對變數或參數進行特定的處理和重寫。

8. 後備： next.config.js 套用後備，管理無法路由的請求。 這允許錯誤處理程序或後備路由。

常見的 Next.js 中間件用例

• 驗證：在存取受保護的資源之前驗證使用者憑證。 中間件可以檢查會話令牌，重定向未經身份驗證的使用者登入。 店員有效地使用了這種方法。

• 日誌記錄：透過將每個請求記錄到中央伺服器進行分析和偵錯來追蹤應用程式事件（使用者操作、錯誤）。

• 資料取得：（有限制）從 API 或資料庫載入資料以取得最新資訊。 請注意稍後討論的性能注意事項。

• 請求路由：自訂路由，將請求重新導向至特定路徑或實作擷取所有錯誤處理程序。

• 快取：透過將經常存取的資源儲存在記憶體中來提高效能，減少請求。 （原文提供範例程式碼）

• 速率限制：監控來自使用者或IP位址的請求，阻止過多的請求以保護後端資源。

• 頁面轉換：即時重寫 HTML 或轉換資料。 這對於圖像 URL 重寫或提供來自不同網域的資源非常有用。

• 分析/報告：追蹤使用者行為和應用程式效能以進行最佳化。 中間件可以修改 cookie 以進行第三方分析整合。

• 國際化：根據使用者區域設定以多種語言交付內容（例如，使用 IP 位址或 HTTP 標頭）。

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

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

中介軟體功能

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

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

將請求重新導向到 /dashboard 的範例，除非要求以 /api 開頭：

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

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

匹配器

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

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

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

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

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

組合多個中間件功能

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

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

Clerk 和 Next.js 中間件

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

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

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

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

Next.js 中間件的限制

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

• 大小限制：中間件函數限制為 1MB。

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

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

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

• 對請求/回應的有限存取：中間件沒有對請求和回應物件的完全存取權。

結論

本指南全面了解 Next.js 中間件、其功能、限制和最佳實踐。 請記住優先考慮高效程式碼以避免效能瓶頸。

以上是Next.js 中的中間件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！