Next.js14 Apache反向代理部署：basePath与assetPrefix配置异常

问题根源是同时设置了basePath和包含完整域名+basePath的assetPrefix，导致两者的路径前缀叠加，生成了重复的/staff-directory路径。以下是具体修正步骤：

1. 调整Next.js环境变量配置 #

生产环境（.env.production） #

删除或清空NEXT_PUBLIC_ASSET_PATH，无需指定完整域名，反向代理和basePath会自动处理路径前缀：

#.env.production
NEXT_PUBLIC_BASE_PATH='/staff-directory'

开发环境（.env.development） #

保持现有配置不变：

#.env.development
NEXT_PUBLIC_ASSET_PATH='http://localhost:3000'
NEXT_PUBLIC_BASE_PATH=''

2. 修正next.config.mjs配置 #

移除assetPrefix配置，basePath会自动为静态资源、路由和API请求添加前缀，仅当使用CDN等外部资源托管时才需要assetPrefix：

const nextConfig = {
    basePath: process.env.NEXT_PUBLIC_BASE_PATH,
    trailingSlash: false,
}

export default nextConfig;

3. 调整代码中的API请求逻辑 #

无需依赖NEXT_PUBLIC_ASSET_PATH，直接用相对路径或显式结合basePath即可：

// 方案1：相对路径（推荐，页面URL已包含basePath，相对路径会自动继承前缀）
const res = await fetch(`/api/staff/${id}`);

// 方案2：显式使用basePath
const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/staff/${id}`);

路由跳转代码无需修改，Next.js的router.push会自动为路径添加basePath前缀。

4. 验证Apache反向代理配置 #

现有配置符合要求，确保ProxyPass和ProxyPassReverse的结尾斜杠一致：

<VirtualHost *:80>
    ServerName 10.34.11.17

    DocumentRoot /var/www/html

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # Proxy for /staff-directory/
    ProxyPass /staff-directory/ http://localhost:5003/
    ProxyPassReverse /staff-directory/ http://localhost:5003/
</VirtualHost>

验证修复效果 #

1. 重新构建生产包：npm run build
2. 启动生产服务：npm run start
3. 访问http://10.34.11.17/staff-directory，检查静态资源路径应为http://10.34.11.17/staff-directory/_next/...，无重复前缀。

内容的提问来源于stack exchange，提问作者Harry Z. Huang