深入探索 Next.js Middleware：解锁其全部潜力

• React Hook 深入浅出
• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

Next.js Middleware 远不止是一个用于路由和重定向的工具——它能帮助你构建更智能、更灵活的 Web 应用。如果你已经熟悉基础用法，那么是时候深入挖掘更高级的技巧，让你的 Next.js 项目更上一层楼。

---

什么是 Next.js Middleware？

Middleware 是在请求完成前执行的代码，处于请求生命周期的“中间地带”。它能够修改响应、进行身份验证，甚至动态重定向用户，同时不影响应用的核心路由结构。

在 Next.js 中，Middleware 运行于 Edge 服务器，即它会在应用完全渲染之前执行，保证更快的请求处理速度。无论是添加自定义请求头、优化 API 响应，还是管理用户会话，Middleware 都能帮助你构建高效流畅的 Web 体验。

---

Middleware 如何在 Next.js 中工作？

Middleware 作为高级请求处理器，在请求抵达服务器或应用逻辑前，便已拦截并处理它。这使得 Middleware 非常适用于 身份验证、本地化、A/B 测试 等动态场景。我们深入了解它的运行机制及高级应用。

核心工作流

1️⃣ 拦截请求：Middleware 捕获所有进入的 HTTP 请求，并对其进行分析或修改。
2️⃣ 执行自定义逻辑：可进行 Cookie 校验、API 令牌验证，或基于地理位置进行个性化处理。
3️⃣ 修改响应：可以动态调整请求头、重定向用户，或将请求转发至特定的页面。
4️⃣ 决定继续或终止请求：使用 NextResponse 来决定请求是否继续 (NextResponse.next()) 或直接终止/重定向。

---

Middleware 执行流程

Middleware 运行在 Edge Serverless 环境下，因此具备超低延迟，并按照以下阶段处理请求：

✅ 请求校验：检查请求头、Cookie 或请求体内容。
✅ 动态路由：根据运行时环境决定请求的去向。
✅ 修改响应：动态调整响应头或增强安全性。

---

高级案例：基于角色的访问控制（RBAC）

以下是一个用于 限制管理员访问权限 的 Middleware 示例：

import { NextResponse } from "next/server";

export function middleware(req) {
  const url = req.nextUrl.clone();
  const userRole = req.cookies.get("role"); // 从 Cookie 读取用户角色

  // 限制非管理员访问 /admin 页面
  if (url.pathname.startsWith("/admin") && userRole !== "admin") {
    url.pathname = "/403"; // 重定向到 "权限不足" 页面
    return NextResponse.redirect(url);
  }

  // 在管理员页面添加安全头信息
  if (url.pathname.startsWith("/admin")) {
    const response = NextResponse.next();
    response.headers.set("X-Admin-Security", "true");
    return response;
  }

  return NextResponse.next(); // 允许其他请求继续
}

代码解析

🔹 检查用户是否访问 /admin 路由
🔹 如果用户不是管理员，则重定向到 403 页面
🔹 为管理员页面添加自定义安全头，提升监控和防护能力

---

高级案例：基于地理位置的动态本地化

Middleware 还能利用 用户 IP 地址 进行 动态本地化，确保用户访问符合其所在地区的内容。

import { NextResponse } from "next/server";

export async function middleware(req) {
  const country = req.geo?.country || "US"; // 读取地理位置信息，默认为 US
  const url = req.nextUrl.clone();

  // 将用户重定向到对应地区的页面
  if (!url.pathname.startsWith(`/${country}`)) {
    url.pathname = `/${country}${url.pathname}`;
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

代码解析

🔹 利用 req.geo 获取用户国家信息
🔹 将用户重定向到其对应的本地化页面

---

优化 Middleware 性能的技巧

🚀 避免阻塞操作：确保 Middleware 逻辑轻量级，避免复杂计算。
🚀 利用 Edge Cache：缓存重复请求的处理结果，减少 Middleware 运行频率。
🚀 限制 Middleware 作用范围：通过 matcher 指定 Middleware 仅运行在特定路由，提升性能。

export const config = {
  matcher: ["/admin/:path*", "/api/:path*"], // 仅在 admin 和 API 路由执行 Middleware
};

---

高级 Middleware 应用场景

Middleware 远不止用于重定向，还能用于更高级的 Web 逻辑：

1️⃣ 动态本地化（基于地理位置或浏览器语言）

import { NextResponse } from "next/server";

export function middleware(request) {
  const country = request.geo?.country || "US";
  const locale = country === "FR" ? "fr" : "en"; // 自动匹配语言

  const url = request.nextUrl.clone();
  url.pathname = `/${locale}${url.pathname}`;
  return NextResponse.rewrite(url);
}

2️⃣ 访问频率限制（Rate Limiting）

import { NextResponse } from "next/server";

const RATE_LIMIT = 100; // 每个用户最大请求数
const userRequests = new Map();

export function middleware(request) {
  const ip = request.ip || "unknown";
  const currentCount = userRequests.get(ip) || 0;

  if (currentCount >= RATE_LIMIT) {
    return new NextResponse("Too many requests", { status: 429 });
  }

  userRequests.set(ip, currentCount + 1);
  return NextResponse.next();
}

3️⃣ 根据设备类型渲染不同页面（移动端/桌面端）

export function middleware(request) {
  const userAgent = request.headers.get("user-agent");
  const isMobile = /mobile/i.test(userAgent);

  const url = request.nextUrl.clone();
  url.pathname = isMobile ? "/mobile" : "/desktop";
  return NextResponse.rewrite(url);
}

4️⃣ 增强安全性（添加 HTTP 头信息）

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set("Content-Security-Policy", "default-src 'self'");
  response.headers.set("X-Frame-Options", "DENY");
  response.headers.set(
    "Strict-Transport-Security",
    "max-age=63072000; includeSubDomains; preload"
  );

  return response;
}

---

最佳实践：高效使用 Middleware

✅ 保持 Middleware 逻辑单一：每个 Middleware 只执行一个功能，如身份验证、日志记录等，避免代码耦合。

export function middleware(req) {
  const token = req.cookies.get("authToken");
  if (!token) {
    return NextResponse.redirect("/login");
  }
  return NextResponse.next();
}

✅ 确保 Middleware 运行在必要的路由上：使用 matcher 限制 Middleware 执行范围，提高性能。

export function middleware(req) {
  if (req.nextUrl.pathname.startsWith("/api")) {
    console.log("API Route Middleware");
  }
  return NextResponse.next();
}

✅ 避免长时间运行的计算：如数据库查询或复杂算法，应放在 API 端处理，而非 Middleware 内。

✅ 组合 Middleware 实现更强大功能：可以通过 链式调用 组合多个 Middleware 逻辑。

export function authMiddleware(req) {
  const token = req.cookies.get("authToken");
  if (!token) return NextResponse.redirect("/login");
  return NextResponse.next();
}

export function roleMiddleware(req) {
  const userRole = req.cookies.get("userRole");
  if (userRole !== "admin") return NextResponse.redirect("/unauthorized");
  return NextResponse.next();
}

// Use both middlewares
export function middleware(req) {
  return authMiddleware(req) || roleMiddleware(req);
}

---

总结

Middleware 是 Next.js 提供的一项强大功能，使开发者能够在 请求生命周期的最前端 拦截和修改请求，实现动态路由、个性化用户体验和增强安全性。

借助 Middleware，Web 应用可以在 不增加服务器负担的情况下 处理复杂逻辑，如 身份验证、国际化、访问控制和安全增强，让你的 Next.js 应用更快、更智能、更可扩展。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。