解决Apache Tomcat部署Next.js静态导出项目的子页面404问题

问题原因 #

你遇到的404问题核心在于Next.js静态导出的文件结构和Tomcat的默认路径解析规则不匹配：

• Next.js默认用output: 'export'导出时，路由页面（比如pages/example.js）会生成out/example.html文件，而非out/example/index.html；
• Tomcat访问/webapp/example这类路径时，会默认查找example/index.html文件，找不到就返回404；即使带查询参数?id=1，Tomcat依然会按路径去匹配文件，自然找不到对应的.html文件。

这确实和URL重写有关，不过也可以通过调整Next.js导出配置解决。

解决方案 #

方案1：修改Next.js配置生成目录式结构 #

在next.config.js中添加trailingSlash: true配置，让Next.js导出时为每个路由生成对应文件夹，并在文件夹内生成index.html：

const nextConfig = {
    output: 'export',
    trailingSlash: true,
}

重新执行npm run build导出静态资源，打包成war部署到Tomcat后：

• 原example.js会生成out/example/index.html；
• 访问localhost:port/webapp/example?id=1时，Tomcat会自动加载example/index.html，问题解决。

方案2：在Tomcat中配置URL重写 #

如果不想修改Next.js导出结构，可通过Tomcat的RewriteValve实现URL重写，将路径请求映射到对应的.html文件：

1. 编辑Tomcat的conf/server.xml，在目标<Host>标签内添加RewriteValve配置：

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

2. 在你的Web应用的WEB-INF目录下创建rewrite.config文件（打包war时需确保该文件被包含），添加以下规则：

# 排除静态资源（css/js/img等）和已带.html后缀的请求
RewriteCond %{REQUEST_URI} !\.(html|css|js|png|jpg|gif|ico)$
# 排除以/结尾的路径（避免循环重写）
RewriteCond %{REQUEST_URI} !/$
# 将路径重写为对应.html文件
RewriteRule ^(.*)$ $1.html [L]

配置完成后重启Tomcat，访问/webapp/example?id=1时，请求会被自动转发到/webapp/example.html，即可正常加载页面。

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