Next.js静态构建后如何通过htaccess配置路由重定向去掉.html后缀

你之前的规则是主动将无后缀路径301重定向到带.html的路径，因此浏览器地址栏会始终显示后缀。要实现无后缀访问、自定义路径定向，可参考以下配置：

1. 全局自动去掉.html后缀配置 #

该配置可以实现所有静态html文件都可以通过无后缀路径访问，同时主动访问带.html后缀的请求会自动跳转到无后缀版本，避免搜索引擎收录重复内容：

RewriteEngine On

# 第一步：将用户主动访问的带.html后缀路径301重定向到无后缀版本
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [L,R=301]

# 第二步：内部重写，无后缀路径实际访问服务器上对应.html文件，用户侧无感知
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [L]

参数说明：

• NC：匹配路径时不区分大小写
• L：当前规则匹配成功后不再执行后续规则
• R=301：返回永久重定向状态码

2. 自定义young-talent路径定向到详情页配置 #

规则需要放在全局去后缀规则之前执行，避免被全局规则拦截，分两种常见场景：

• 固定路径定向：/young-talent直接定向到指定详情页文件（比如详情页静态文件为/project/young-talent-detail.html）

RewriteRule ^young-talent$ /project/young-talent-detail.html [L]

• 带动态参数的详情页定向：比如/young-talent/123对应id为123的详情页，实际访问/young-talent/detail.html?id=123

RewriteRule ^young-talent/([0-9]+)$ /young-talent/detail.html?id=$1 [L]

注意事项 #

• 修改规则后如果不生效，优先清除浏览器缓存（301重定向会被浏览器长期缓存），再重启Apache服务测试
• Next.js静态导出时建议在next.config.js中添加配置trailingSlash: false，避免路径末尾斜杠和重定向规则冲突
• 如果存在静态资源（css/js/图片）访问异常，可以在规则最上方添加RewriteCond %{REQUEST_FILENAME} !-f跳过真实存在的静态文件的重定向判断

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