Next.js中间件实战：从基础到高级应用

1. Next.js中间件基础概念与核心价值

在Next.js生态中，middleware（中间件）是一种在请求到达页面渲染前进行拦截处理的机制。它运行在Edge Runtime环境中，这意味着它比传统的Node.js服务器更接近用户，能够实现更快的响应速度。中间件最常见的应用场景包括：身份验证、路由重定向、请求头修改、A/B测试分流等。

与Express/Koa等传统Node框架的中间件不同，Next.js中间件具有以下特性：

• 边缘优先：默认部署在Vercel的边缘网络，全球分布式执行
• 零配置路由匹配：基于文件系统的路由自动生效，无需额外配置
• 现代API支持：原生支持Web API如Request/Response对象
• 类型安全：与TypeScript深度集成，提供完善的类型提示

一个典型的中间件文件位于项目根目录的middleware.ts（或.js）中，基础结构如下：

typescript复制import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 请求处理逻辑
  if (request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

2. 中间件核心配置与路由匹配策略

2.1 文件位置与作用范围

Next.js中间件的路由匹配遵循以下规则：

1. 全局中间件：放置在项目根目录的middleware.ts文件会作用于所有路由
2. 路径限定中间件：可以通过文件位置限定作用范围，例如：
   • /pages/_middleware.ts → 作用于/pages下所有路由（旧版pages目录）
   • /app/(auth)/_middleware.ts → 仅作用于/app/(auth)路由组
3. 排除规则：使用config.matcher排除特定路径

typescript复制export const config = {
  matcher: [
    '/((?!api|_next/static|favicon.ico).*)',  // 排除静态资源
    '/dashboard/:path*'  // 仅匹配dashboard下的所有路由
  ]
}

2.2 条件匹配进阶技巧

实际项目中经常需要复杂匹配逻辑，以下是几种实用模式：

typescript复制// 多条件组合匹配
export const config = {
  matcher: [
    {
      source: '/((?!api|_next).*)',
      has: [
        { type: 'header', key: 'x-custom-header', value: 'special' }
      ]
    }
  ]
}

// 动态参数捕获
export function middleware(req: NextRequest) {
  const pathname = req.nextUrl.pathname
  if (pathname.match(/^\/product\/([^\/]+)\/edit$/)) {
    const productId = pathname.split(