使用Apache反向代理Docker中Next.js v14应用遇URL路径异常问题

问题根源 #

核心矛盾是Next.js子路径配置与Apache代理规则不匹配：

• 未正确设置basePath导致Next.js生成的路由、资源路径不带/myapp前缀
• Apache代理的路径映射逻辑与Next.js的期望路径不一致

1. 修正Next.js配置（next.config.mjs） #

替换assetPrefix为basePath——这是Next.js处理子路径部署的核心配置，会自动为所有路由、静态资源添加前缀：

const isProd = process.env.NODE_ENV === 'production';

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  // 关键：生产环境下所有路由/资源自动带上/myapp前缀
  basePath: isProd ? "/myapp" : "",
  // 保持路径格式统一，避免跳转异常
  trailingSlash: true,
  // 可选：若需明确指定静态资源前缀，可设置与basePath一致
  // assetPrefix: isProd ? "/myapp" : "",
};

export default nextConfig;

修改后重启Docker容器，让配置生效。

2. 修正Apache代理配置 #

调整ProxyPass和ProxyPassReverse，确保请求路径与Next.js的basePath匹配：

方式一：保留路径前缀映射 #

ProxyPreserveHost On
ProxyRequests Off
// 将/myapp开头的请求完整转发到Next.js的/myapp路径
ProxyPass "/myapp" "http://localhost:6502/myapp"
ProxyPassReverse "/myapp" "http://localhost:6502/myapp"

方式二：截断前缀映射 #

若希望Apache将/myapp/xxx直接映射到Next.js的/xxx，需注意：

ProxyPreserveHost On
ProxyRequests Off
// 两边都带斜杠，确保路径正确截断
ProxyPass "/myapp/" "http://localhost:6502/"
ProxyPassReverse "/myapp/" "http://localhost:6502/"

此模式下，Next.js的basePath需设为空，但必须同时设置assetPrefix: "/myapp"，否则静态资源路径会缺失前缀导致加载失败。

验证步骤 #

1. 重启Apache服务，确保配置生效
2. 访问http://mydomain/myapp，检查图片是否正常加载
3. 点击页面链接，确认跳转路径为http://mydomain/myapp/update而非http://mydomain/update

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