Next.js中间件实战：高效拦截与处理请求

Next.js中间件实战指南

最新推荐文章于 2025-12-05 11:17:30 发布

原创最新推荐文章于 2025-12-05 11:17:30 发布 · 322 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

Next.js 中间件（Middleware）详解与实战

什么是中间件

Next.js 中间件是一种在请求到达页面或 API 路由之前运行的函数，允许开发者拦截请求并执行自定义逻辑。中间件可以用于身份验证、日志记录、重定向、修改请求头等场景。中间件在 Next.js 12 中引入，运行在 Edge Runtime 上，提供低延迟和高性能。

中间件的工作原理

中间件在请求生命周期中处于前置位置，能够拦截所有请求。其执行顺序如下：

用户发起请求。
中间件拦截请求并执行自定义逻辑。
根据中间件的处理结果，请求可能被重定向、修改或继续传递到目标页面。

中间件的核心功能

身份验证：检查用户是否登录，未登录则重定向到登录页。
路由保护：限制某些路由的访问权限。
请求头修改：添加或修改请求头。
A/B 测试：根据条件将用户分配到不同版本的页面。
国际化：根据用户地理位置或语言偏好重定向到对应语言版本。

中间件的实现步骤

创建中间件文件 在 Next.js 项目的根目录或 src 目录下创建 middleware.js 或 middleware.ts 文件。该文件会自动生效，无需额外配置。

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

export function middleware(request: NextRequest) {
  // 检查路径
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    // 模拟身份验证逻辑
    const isAuthenticated = request.cookies.get('authToken')?.value === 'valid';
    if (!isAuthenticated) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  // 修改请求头
  const response = NextResponse.next();
  response.headers.set('x-custom-header', 'hello-world');
  return response;
}

配置中间件匹配规则 通过 config.matcher 指定中间