Next.js静态导出后通过FileZilla FTP部署的.htaccess相关问题

核心问题定位 #

1. 资源与路由基准路径不匹配 #

Next.js默认以站点根路径作为所有静态资源、内部路由的寻址基准，当应用部署在子域名绑定的子目录，或是子路径映射的服务环境下，未配置basePath会导致CSS、JS等静态资源请求路径错误，进而出现样式无法加载、交互逻辑失效、路由跳转错误的问题，配置basePath: "/thesubdomain"正是修正这个问题的核心操作。

2. .htaccess配置错误 #

你提供的.htaccess存在两处问题：

• 语法错误：最后一行RewriteRule规则末尾缺少闭合的]，会导致重写规则不生效
• 规则适配错误：执行next export导出的Next.js静态应用，默认每个路由都会生成独立的HTML文件，统一回退到index.html的SPA规则并不适配静态导出场景，会导致路由访问异常。

完整操作方案 #

• 确保next.config.js中已经正确配置basePath参数，参数值和你部署的子目录路径保持完全一致：

  const nextConfig = {
    basePath: '/thesubdomain',
    // 如果需要统一路由末尾斜杆，可额外配置
    trailingSlash: true,
  }
  module.exports = nextConfig
  

• 替换原有错误的.htaccess配置为如下内容：

  RewriteEngine On
  # 已存在的文件/目录直接返回
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # 适配静态导出的HTML文件访问
  RewriteRule ^(.*)$ $1.html [L]
  # 若需支持客户端SPA路由，可额外添加以下规则，注意替换为你的basePath值
  # RewriteRule ^thesubdomain/(.*)$ /thesubdomain/index.html [QSA,L]
  

• 修改配置后重新执行next build && next export，将新生成的out目录下所有文件完整上传到FTP服务器对应子域名的根目录即可。

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