Next.js静态部署后无.html扩展名访问非首页出现404错误

• 调整Next.js静态导出配置
  打开项目根目录的next.config.js，添加trailingSlash: true配置，确保输出的静态文件结构支持无扩展名访问：

  module.exports = {
    trailingSlash: true,
    output: 'export', // 明确指定静态导出模式
  };
  

  重新执行npm run build生成新的静态文件，再用FileZilla上传到服务器。开启这个配置后，每个页面会生成对应子文件夹下的index.html，比如en/marine/modelvirtue/index.html，此时访问https://www.mywebsite.com/en/marine/modelvirtue就会自动指向这个文件，无需加.html。

• 配置服务器URL重写规则
  如果服务器支持（比如Apache或Nginx），可以通过重写规则让请求自动补全.html后缀：

  • Apache环境：在网站根目录创建.htaccess文件，写入以下规则

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ $1.html [L]
    

  • Nginx环境：在站点配置里添加

    location / {
      try_files $uri $uri.html $uri/ =404;
    }
    

  把配置文件和静态文件一起上传到服务器，服务器会自动把无后缀的请求映射到对应的.html文件。

• 检查部署的文件结构
  用FileZilla上传时，确保把Next.js build生成的out文件夹里的所有内容完整上传，包括自动生成的子文件夹（比如开启trailingSlash后的en/marine/modelvirtue文件夹），不要只单独上传每个.html文件，否则服务器无法识别无后缀的路径。

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