第六章：Next.js 进阶

中间件 (Middleware)

什么是中间件？

中间件（Middleware）是 Next.js 提供的一种在请求完成之前执行代码的能力。它允许你在请求到达页面之前拦截请求，并根据需要修改响应或重定向请求。中间件在 Next.js 中通常用于以下场景：

  • 身份验证和授权检查
  • 路由重定向
  • 请求/响应修改
  • A/B 测试或功能标记
  • 日志记录和分析

中间件的工作原理

在 Next.js 中，中间件文件通常命名为 middleware.js（或 middleware.ts）并放置在项目根目录或 src 目录下。中间件会在每个请求上运行，除非你明确配置它只在特定路径上运行。

一个基本的中间件示例：

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  if (request.nextUrl.pathname.startsWith('/admin')) {
    // 假设我们检查用户是否已认证
    const isAuthenticated = checkAuth(request)
    
    if (!isAuthenticated) {
      return NextResponse.redirect(new URL('/login', request.url))
    }
  }
  
  return NextResponse.next()
}

中间件的常见用例

  1. 身份验证保护路由
export function middleware(request) {
  const token = request.cookies.get('authToken')?.value
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  
  return NextResponse.next()
}
  1. 地理定位重定向
export function middleware(request) {
  const country = request.geo?.country || 'US'
  
  if (country === 'GB' && request.nextUrl.pathname === '/') {
    return NextResponse.redirect('/uk-home')
  }
  
  return NextResponse.next()
}
  1. 设置响应头
export function middleware(request) {
  const response = NextResponse.next()
  response.headers.set('x-custom-header', 'my-value')
  return response
}

配置中间件路径匹配

你可以通过 config.matcher 精确控制中间件在哪些路径上运行：

export const config = {
  matcher: [
    '/admin/:path*',
    '/dashboard/:path*',
    '/api/secure/:path*'
  ]
}

性能考虑

  • 中间件在每个匹配的请求上运行，因此应保持轻量级
  • 避免在中间件中进行复杂的计算或数据库查询
  • 考虑使用边缘函数（Edge Functions）来部署中间件以获得更好的性能

调试中间件

Next.js 提供了几种调试中间件的方法：

  1. 在开发模式下，中间件日志会显示在终端中
  2. 使用 console.log 输出调试信息
  3. 在 Vercel 部署中，可以通过日志查看中间件行为

最佳实践

  1. 保持中间件简单且专注单一职责
  2. 为不同的功能创建多个中间件文件（通过条件导入）
  3. 在开发环境中充分测试中间件行为
  4. 考虑使用 TypeScript 以获得更好的类型安全

通过合理使用中间件，你可以为 Next.js 应用添加强大的请求处理逻辑，同时保持代码的整洁和可维护性。

Last Updated::