Next.js静态构建部署后刷新/跳转路由自动重定向至首页问题求助

核心原因 #

静态导出的Next.js属于单页应用（SPA），直接访问子路由或刷新页面时，服务器会尝试寻找对应路径的静态文件（比如/home.html），找不到就会触发重定向到根路径。需要配置服务器将所有非静态资源的请求转发到index.html，交由Next.js客户端路由接管处理。

Next.js项目配置确认 #

确保next.config.js中的配置正确，重新执行npm run export生成静态文件：

module.exports = {
  trailingSlash: true, // 开启后每个路由生成带斜杠的目录及内部的index.html，比如/home/index.html
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
      '/home': { page: '/home' },
      '/register': { page: '/register' },
      '/login': { page: '/login' },
      '/forgot_password': { page: '/forgot_password' },
    };
  },
};

各服务器配置方案 #

1. S3静态托管 #

• 进入S3桶的静态网站托管设置：
  • 将索引文档设为index.html
  • 将错误文档设为index.html（关键配置，替代冗余的重定向规则）
• 部署更新后的静态文件，此时404请求会自动转发到index.html，由客户端路由处理正确路径

2. Apache（.htaccess） #

在项目根目录的.htaccess中添加以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

规则说明：

• 跳过对index.html本身的重写
• 若请求的文件或目录不存在，自动转发到index.html

3. Nginx #

修改Nginx站点配置文件，在location /块中加入try_files规则：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/nextjs-exported-files;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

规则说明：

• 优先尝试访问请求的文件或目录
• 若不存在，返回index.html交由客户端路由处理

验证步骤 #

重新部署静态文件后：

• 直接粘贴子路由地址（如/home）访问
• 在子路由页面刷新浏览器
• 确认页面正常加载，无自动跳转到根路径的情况

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