Next.js构建后部署Apache服务器刷新动态路由页面404如何解决？

问题原因 #

该问题由.htaccess配置规则不匹配Next.js静态导出的动态路由逻辑导致，和应用代码无关。
你当前的重写规则逻辑是：仅当请求路径添加.html后缀后对应物理文件存在时，才会正常返回内容。但article/[id].js对应的构建产物只有article/[id].html一个静态文件，用户访问article/自定义文章标题这类动态路径时，系统找不到article/自定义文章标题.html的实际文件，就会返回404。

解决方案 #

根据你的部署模式选择对应配置：

场景1：使用next export做静态导出部署

直接替换你的.htaccess内容为以下配置即可：

RewriteEngine On

# 处理常规静态页面，存在对应html文件的直接重写
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [L]

# 处理article目录下的动态路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^article/(.*)$ /article/[id].html [L]

# 其他全局路由异常兜底（可选，如有其他动态路由可开启）
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteCond %{REQUEST_FILENAME} !-d
# RewriteRule ^(.*)$ /index.html [L]

如果后续新增其他动态路由目录，参照article的规则新增对应重写规则即可。

场景2：使用Next.js Node服务模式部署

需要先开启Apache的mod_proxy和mod_proxy_http模块，再用以下配置将请求转发到Next.js启动的本地服务（默认端口3000）：

RewriteEngine On
RewriteRule ^(.*)$ http://localhost:3000/$1 [P,L]

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