NextJS 14动态路由在Cloudways生产环境返回404问题求助

问题核心 #

动态路由页面加载时触发404错误，本质是服务器未正确处理包含[id]转义字符的静态chunk文件请求。Cloudways上的Apache反向代理配置未将/_next/static/开头的静态资源请求交付给负责托管静态文件的Nginx，反而错误转发至NextJS的3000端口；或是Nginx的静态资源规则不支持匹配带转义特殊字符的路径，导致chunk文件无法被找到。

解决方法 #

方案1：修正Apache .htaccess配置，放行静态资源请求 #

修改.htaccess，添加规则让/_next/开头的静态资源请求直接读取服务器文件，不经过反向代理：

DirectoryIndex disabled
RewriteEngine On

# 优先处理NextJS静态资源，直接返回文件
RewriteRule ^_next/static/(.*)$ /_next/static/$1 [L]

# 根路径反向代理到3000端口
RewriteRule ^$ http://localhost:3000/ [P,L]

# 非文件/目录的请求反向代理到3000端口
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://localhost:3000/$1 [P,L]

方案2：调整Nginx静态资源配置 #

若Nginx负责处理静态文件，需确保其配置支持匹配带特殊字符的路径，在站点配置中添加/修改以下规则：

location /_next/static/ {
    alias /实际项目路径/.next/static/;
    expires 365d;
    add_header Cache-Control "public, immutable";
    try_files $uri $uri/ =404;
}

将/实际项目路径/替换为你NextJS项目在服务器上的真实路径，确保Nginx能定位到.next/static下的所有chunk文件。

方案3：检查Cloudways平台静态资源设置 #

登录Cloudways面板，确认应用的静态资源托管配置已正确指向.next/static目录，且平台未过滤URL中的[、]或其转义形式%5B、%5D，必要时手动开启特殊字符请求的允许权限。

验证步骤 #

修改配置后重启Apache和Nginx服务，访问动态路由页面，查看浏览器控制台是否仍存在404错误。若配置生效，页面将正常加载商品详情内容。

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