我們來談談Nextjs中的路由。今天，我們來談談最強大的事物中間件之一。 Nextjs 中的中間件提供了一種強大且靈活的方法來攔截來自伺服器的請求並控制請求流（重定向、URL 重寫）並全域增強身份驗證、標頭、cookie 持久性等功能。

建立中介軟體

讓我們建立 Middleware Next.js 應用程式。首先，我們將在 src 資料夾中為中間件建立一個新文件，例如 middleware.js 或 middleware.ts。 Next.js 中的中間件需要讓您精細控制其活動位置（即自訂匹配器配置，或使用 isXXX 函數）

重定向

以重定向為例，讓我們想像一個場景，導航到 /profile 應將使用者重定向到主頁。使用自訂匹配器配置方法，我們可以透過匯入必要的類型、定義中間件函數並指定匹配器配置來實現此目的：

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

在此範例中，中介軟體功能檢查請求 URL 路徑是否為 /profile 並將使用者重新導向至首頁。

對於條件語句的方式，我們可以修改程式碼如下：

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

在這種情況下，中間件會檢查請求 URL 路徑，如果路徑為 /profile，則將使用者重新導向至 /hello 路由。

Next.js 中的中間件不僅僅是處理重新導向。它還允許 URL 重寫，這對於舊版 URL 支援或 SEO 優化非常有用。透過在前面的範例中將重定向變更為重寫，瀏覽器中的 URL 將保持不變（/profile），但回應內容將變更為 /hello 路由中的內容。

使用 Cookie

最後，讓我們探討 cookie 和 headers 在中介軟體中的使用。我們可以修改我們的中間件來處理使用者對主題的偏好，並為所有回應添加自訂標頭：

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

在此範例中，我們首先檢查使用者是否在 cookie 中儲存了主題首選項。如果沒有，我們透過新增 cookie 將主題設為「深色」。然後，我們向回應添加自訂標頭，這對於傳遞附加資訊或用於偵錯目的非常有用。

如您所見，Next.js 中的中間件是一個功能強大的工具，可讓您有效地控制和攔截請求回應週期、啟用重定向、URL 重寫以及標頭和 cookie 的操作。透過掌握中間件，您可以增強 Next.js 應用程式中的路由體驗，並創建更強大且可自訂的使用者體驗。

「Next.js 中的中間件是一項強大的功能，它提供了一種強大的方法來攔截和控制應用程式中的請求和回應流。」- Next.js 文件

結論

總之，我們學習如何在Next.js 中定義中間件，探索兩種主要方法（自訂匹配器配置和條件語句），以及應用中間件來處理重定向、URL 重寫以及cookie 和標頭的管理。這些知識將幫助您利用中間件提供的靈活性和控制力，將 Next.js 應用程式提升到一個新的水平。