Next.js静态应用部署Apache虚拟主机后非根路由出现404错误

用Next.js替代Create React App做纯静态项目，未启用任何服务端渲染或服务端逻辑，仅需服务器提供静态文件。之前沿用CRA的流程：本地执行npm run build后用rsync把生成文件同步到虚拟主机，初期运行正常。但升级到Next.js v13的App Router并添加路由后，本地开发环境一切正常，虚拟主机上除根路径外所有路由均报404错误。

生成的静态文件包含：

404.html
index.html
index.txt
myroute.html
myroute.txt
_next/

需要实现浏览器访问/myroute和/myroute/12345都能正常加载，目前生产服务器无法处理这类请求，可通过配置.htaccess文件解决。

对应的.htaccess配置内容 #

# 启用Rewrite引擎
RewriteEngine On

# 排除_next目录和已存在的文件/目录，避免静态资源被重写
RewriteCond %{REQUEST_URI} !^/_next/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# 处理一级路由及嵌套路由：将请求重写到对应.html文件
# 示例：/myroute → myroute.html；/myroute/12345 → myroute.html
RewriteRule ^([^/]+)/?(.*)$ $1.html [L]

# 兜底规则：未匹配到的请求指向index.html，兼容客户端路由
RewriteRule ^$ index.html [L]
RewriteRule ^(.*)$ index.html [L]

配置说明 #

• 启用Rewrite引擎是Apache重写规则的基础；
• 排除_next目录和已存在的文件/目录，确保JS、CSS等静态资源能正常访问，不被重写规则干扰；
• 第一条RewriteRule处理一级路由和嵌套路由：Next.js App Router静态生成时，嵌套路由内容会打包到父路由的HTML文件中，因此将/myroute/12345这类请求重定向到myroute.html即可；
• 最后两条兜底规则确保所有未匹配到的请求都指向index.html，避免404，同时兼容Next.js客户端路由逻辑。

使用步骤 #

1. 在项目根目录创建.htaccess文件，粘贴上述配置；
2. 执行npm run build重新构建项目；
3. 用rsync将包括.htaccess在内的所有生成文件同步到虚拟主机服务器根目录。

配置完成后，访问/myroute和/myroute/12345即可正常加载对应静态HTML文件，解决404问题。

内容的提问来源于stack exchange，提问作者Dan B.