如何让SSR的Next.js14应用在Apache反向代理下加载静态资源

问题分析 #

你的场景是Apache将10.xx.xx.09/testwebsite/反向代理到http://localhost:3000/，出现两个核心问题：

• 未配置basePath时，静态资源路径以/_next/开头，浏览器会向10.xx.xx.09/_next/请求，而非10.xx.xx.09/testwebsite/_next/，导致资源加载失败。
• 配置basePath后出现404，大概率是Apache代理规则未匹配到basePath对应的子路径请求，或Next.js服务未正确处理带basePath的请求。

解决方案步骤 #

1. 正确配置Next.js的basePath

修改项目根目录下的next.config.mjs，设置basePath为代理路径/testwebsite（注意不要加末尾斜杠）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/testwebsite',
  // 生产环境建议启用standalone输出，减少服务器依赖
  output: 'standalone',
};

export default nextConfig;

• 开发环境：重启dev服务时需允许外部访问，执行命令：

  npm run dev -- --hostname 0.0.0.0
  

• 生产环境：重新构建并启动服务：

  npm run build
  npm start
  

2. 调整Apache反向代理配置

修改你的VirtualHost配置，确保所有/testwebsite开头的请求都被转发到Next.js服务，同时修正路径匹配和响应头处理：

<VirtualHost *:80>
    ServerName 10.xx.xx.09

    DocumentRoot /var/www/html

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

    ProxyPreserveHost On
    ProxyErrorOverride Off
    # 去掉末尾斜杠，确保/testwebsite下所有子路径（如/_next、/static）都被代理
    ProxyPass /testwebsite http://localhost:3000
    ProxyPassReverse /testwebsite http://localhost:3000
    # 修正cookie路径，避免跨路径cookie问题
    ProxyPassReverseCookiePath / /testwebsite/
</VirtualHost>

3. 验证Apache模块是否启用

确保Apache已加载代理相关模块，在RHEL上执行：

httpd -M | grep -E 'proxy|proxy_http'

如果没有输出，编辑/etc/httpd/conf.modules.d/00-proxy.conf，确保以下行未被注释：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

然后重启Apache服务：

systemctl restart httpd

验证排查 #

1. 重启Next.js和Apache服务后，访问10.xx.xx.09/testwebsite/。
2. 打开浏览器控制台的「网络」标签，检查静态资源请求路径是否为/testwebsite/_next/...，且返回状态码为200。
3. 查看Next.js服务日志，确认请求是否正常到达，路径是否包含/testwebsite前缀。

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