Next.js静态导出部署子目录后非首页刷新跳转错误问题求解

你当前使用的.htaccess规则默认将所有非静态资源请求转发到站点根目录的index.html，没有匹配你部署的子目录路径，导致刷新时直接定位到根站点入口，没有进入你的Next.js应用路由逻辑。

1. 替换/subdirectory目录下的.htaccess配置 #

该配置文件需要放在你服务器站点根目录下的subdirectory文件夹内，不要放在站点根目录：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 重写基路径修改为你的子目录路径
  RewriteBase /subdirectory/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  # 重写目标修改为子目录下的index.html，移除末尾多余斜杠
  RewriteRule . /subdirectory/index.html [L]
</IfModule>

2. 修正next.config.js配置 #

补充trailingSlash配置保证静态导出路径和Apache路由匹配：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/subdirectory',
  // 静态导出场景必须开启，保证页面路径对应生成的静态html文件路径
  trailingSlash: true,
  // Next.js 12.3+版本可以直接加这个配置，无需在构建命令加export参数
  output: 'export'
}

module.exports = nextConfig

3. 验证生效 #

修改完成后清理浏览器缓存，使用无痕模式访问子页面刷新测试即可。如果规则不生效，确认Apache服务器已经开启mod_rewrite模块。

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