Next.js项目生产环境下Middleware重定向链接失效问题求助

我之前在Next.js项目里也碰到过一模一样的情况——开发时功能正常，一部署到生产环境就各种出问题，本质上大多是Middleware的作用范围没控制好，或者重定向逻辑的细节没适配生产环境的规则。咱们一步步来解决：

1. 给Middleware加上匹配范围限制（最常见的原因） #

默认情况下，Next.js的Middleware会拦截所有请求，包括静态资源（比如头部导航的样式文件、脚本）、API路由甚至/_next/目录下的内部文件。生产环境中这些资源被拦截后，就会导致头部样式加载失败、链接点击无响应，看起来像是“头部链接失效”。

解决办法是给Middleware添加config.matcher，明确指定它只作用在需要重定向的路由上：

import { NextResponse, NextRequest } from 'next/server'

// 只让Middleware处理/recent路径，避免干扰其他资源请求
export const config = {
  matcher: ['/recent'],
}

export async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl
  switch (pathname) {
    case '/recent':
      // 用req.url作为基准构造绝对URL，生产环境相对路径容易出问题
      return NextResponse.redirect(new URL('/explore', req.url))
  }
  return NextResponse.next()
}

2. 确保重定向使用绝对URL #

开发环境中相对路径/explore可能正常，但生产环境的域名、部署路径（比如子目录部署）可能导致相对路径解析错误。用new URL('/explore', req.url)可以保证生成的是基于当前请求的完整绝对URL，避免重定向到错误地址。

3. 检查路径大小写问题 #

生产环境的服务器（比如Vercel、Netlify）通常是路径大小写敏感的，而开发环境的Next.js默认不区分大小写。如果用户实际访问的是/Recent（大写R），你的case '/recent'就匹配不到，导致重定向失效。可以改成大小写不敏感的匹配：

switch (pathname.toLowerCase()) {
  case '/recent':
    return NextResponse.redirect(new URL('/explore', req.url))
}

4. 排查是否有其他路由规则冲突 #

如果你的next.config.js里配置了redirects或者rewrites，或者有其他Middleware，可能会和当前的重定向逻辑互相干扰。可以暂时禁用其他路由规则，测试当前Middleware是否正常工作，逐步排查冲突点。

5. 查看生产环境日志 #

部署平台（比如Vercel）的日志里会记录Middleware的执行细节，有没有报错、路径匹配是否正确。通过日志可以快速定位到是路径匹配失败，还是重定向的URL有问题。

按照上面的步骤调整后，应该就能解决生产环境的问题了。

内容的提问来源于stack exchange，提问作者SAMIRA hs