Next.js Rewrites配置后出现404错误，请求未抵达后端服务器

排查步骤及修复方法 #

• 重启开发服务器并清理缓存
  Next.js开发服务器会缓存配置文件，修改next.config.js后必须重启服务才能生效。执行Ctrl+C终止当前服务，再重新运行npm run dev启动。

• 检查本地API路由是否冲突
  如果项目中pages/api或app/api目录下存在与/api/v1/auth/login路径匹配的文件（比如app/api/v1/auth/login/route.ts），Next.js会优先匹配本地API路由，忽略rewrite规则。删除或重命名这类本地文件即可。

• 调整rewrites配置的优先级
  将rewrite规则放在beforeFiles数组中，确保它优先于本地路由匹配，同时开启调试日志查看匹配情况：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: true,
    },
    async rewrites() {
      return {
        beforeFiles: [
          {
            source: "/api/:path*",
            destination: "https://api.mydomain.com/:path*",
          }
        ],
        debug: true
      }
    }
  }
  
  module.exports = nextConfig
  

  开启debug: true后，终端会输出rewrite匹配日志，可确认请求是否被正确转发到目标地址。

• 验证路径匹配逻辑
  请求/api/v1/auth/login中的v1/auth/login会被:path*捕获，转发到https://api.mydomain.com/v1/auth/login，路径逻辑本身是正确的。如果调试日志显示未匹配，检查配置中是否存在拼写错误。

• 确认appDir配置的兼容性
  若使用较旧版本的Next.js，experimental.appDir可能存在rewrite规则的兼容性问题。尝试升级Next.js到最新稳定版，或暂时关闭appDir测试是否能正常转发。

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