Next.js跨端口应用重写配置问题：Docker容器连接失败

配置错误点 #

你的rewrites配置存在几个核心问题：

• source格式错误：source应该是路径匹配规则（如/:path*），而非完整的http://localhost:3000 URL，Next.js会自动基于当前应用的域名处理路径匹配
• destination格式错误：指向外部URL时，必须填写完整的HTTPS/HTTP地址（不能以/开头），同时需要添加basePath: false参数以避免路径冲突
• 重复规则无效：两个完全相同的规则只会生效一个，属于冗余配置

正确配置示例 #

假设你要将非容器化Next.js（运行在3000端口）的所有请求转发到Docker容器的ngrok HTTPS地址，修改next.config.js如下：

async rewrites() {
  return [
    {
      source: '/:path*', // 匹配当前应用的所有路径
      destination: 'https://your-ngrok-subdomain.ngrok.io/:path*', // 替换为你的实际ngrok URL，保留路径占位符
      basePath: false, // 关键参数，确保外部转发不受basePath影响
    },
  ]
}

额外排查步骤 #

• 直接访问ngrok URL，确认Docker容器内的Next.js应用能正常响应，排除容器本身的运行问题
• 如果不使用ngrok，可直接使用Docker容器的内部IP+端口作为destination（如http://172.17.0.2:3001/:path*，具体IP通过docker inspect <容器ID>查看），注意非容器化应用所在主机必须能访问该IP
• 确保Next.js版本在v10及以上，旧版本对外部URL的rewrites支持有限
• 修改配置后重启非容器化的Next.js应用，使配置生效

内容的提问来源于stack exchange，提问作者Roger Satsi Dankudi