快捷導(dǎo)航

Next.js 中 middleware 中間件使用方式

更新時(shí)間：2026年01月27日 09:31:48 作者：新節(jié)

本文主要介紹了Next.js 中 middleware 中間件使用方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 什么是 Middleware？

Middleware 是運(yùn)行在 請求到達(dá)路由之前 的一個函數(shù)。
它位于 用戶請求 和 路由處理器 之間，可以對請求進(jìn)行 攔截、修改、重定向、鑒權(quán) 等操作。
本質(zhì)上是運(yùn)行在 Edge Runtime（輕量、無 Node.js API，僅 Web API）。

2. Middleware 的文件位置

必須放在項(xiàng)目根目錄的 middleware.ts 或 middleware.js 文件中。
作用范圍取決于你在 matcher 中定義的路徑。

project/
 ├── app/
 ├── middleware.ts   ?? 全局 Middleware
 └── package.json

3. 常見場景

(1) 權(quán)限控制 / 鑒權(quán)

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

export function middleware(request: NextRequest) {
  // 打印請求路徑
  console.log("請求路徑:", request.nextUrl.pathname);

  // 例子：未登錄就重定向到 /auth/signin
  const isLoggedIn = request.cookies.get("next-auth.session-token");
  console.log("是否登錄:", isLoggedIn);

  if (!isLoggedIn && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/auth/signin", request.url));
  }

  // 默認(rèn)放行
  return NextResponse.next();
}

// 匹配規(guī)則：只在 /dashboard 下生效
export const config = {
  matcher: ["/dashboard/:path*"]
};

matcher: ["/dashboard/:path*"] 表示 /dashboard 下的所有路徑，包括： /dashboard、/dashboard/about、/dashboard/blog/123 等。都會觸發(fā) middleware 函數(shù)。

上面的代碼含義：如果用戶未登錄，并且請求路徑以 /dashboard 開頭，就重定向到 /auth/signin。

如圖未登錄：

如圖已登錄：

(2) 國際化 / 路由重寫

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

  // 如果路徑?jīng)]有語言前綴，重寫到默認(rèn)語言
  if (!pathname.startsWith("/en") && !pathname.startsWith("/zh")) {
    const url = request.nextUrl.clone();
    url.pathname = `/en${pathname}`;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

(3) A/B 測試

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

  // 簡單隨機(jī)分流
  if (Math.random() > 0.5) {
    return NextResponse.rewrite(new URL("/experiment-a", request.url));
  }
  return NextResponse.rewrite(new URL("/experiment-b", request.url));
}

(4) 防盜鏈 / 訪問控制

export function middleware(request: NextRequest) {
  const referer = request.headers.get("referer");
  if (referer && !referer.includes("yourdomain.com")) {
    return new NextResponse("禁止訪問", { status: 403 });
  }
  return NextResponse.next();
}