Next.js 静态导出应用在 Nginx 上路由失效的原因是什么？如何解决？

Next.js 静态站点部署到 Nginx 后路由失效的排查与解决

在将 Next.js 静态站点部署到 Nginx 服务器后，页面路由刷新失效，跳转回首页，是一个常见问题。本文分析此问题产生的原因并提供解决方案。

问题背景

假设你的 Next.js 项目包含一个 /test 路由，并使用 output: "export" 配置进行静态导出。本地开发环境运行正常，但部署到 Nginx 后，访问 /test 会跳转到首页 /index.html。你的 Nginx 配置可能包含以下 try_files 指令：

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

值得注意的是，同样的 Nginx 配置在 Vue.js 的 history 模式下却能正常工作。

问题分析

Next.js 静态导出生成的并非完整的 SPA 应用，而是预渲染的 HTML 文件。当访问 /test 路由时，如果 /test 路由对应的 HTML 文件不存在于导出目录中，Nginx 的 try_files 指令就会将其重定向到 /index.html。这与 Vue.js 的 history 模式不同，后者通常会生成一个 index.html 文件，并由 JavaScript 客户端路由处理。

解决方案

解决此问题，关键在于确保 Nginx 能正确找到并服务 /test 路由对应的静态文件。以下是一些解决方案：

1. 检查 Next.js 导出配置: 确认你的 Next.js next.config.js 文件中 output 配置正确，并且静态导出过程成功生成了所有路由对应的 HTML 文件。 仔细检查是否有任何构建错误或警告。

   

   无限画

   千库网旗下AI绘画创作平台

   下载

2. 调整 Nginx 配置: 避免使用 try_files $uri $uri/ /index.html 这种过于宽泛的重定向规则。 可以尝试更精确的配置，例如：

   location / {
       try_files $uri $uri/ /404.html; # 将 404 重定向到自定义 404 页面
   }

   或者，如果你的 Next.js 应用所有路由的 HTML 文件都位于根目录下，可以尝试：

   location / {
       try_files $uri $uri/ /index.html;
       # 或者直接使用
       root /path/to/your/nextjs/out; # 将 Nginx 的 root 指向你的 Next.js 导出目录
       index index.html;
   }

3. 使用 Next.js API Routes: 对于动态内容或需要服务器端渲染的路由，使用 Next.js 的 API Routes，并让 Nginx 反向代理到 Next.js 服务器。 这对于需要服务器端逻辑的路由更为合适。

4. 使用 Next.js 的 getStaticPaths: 如果你的路由是动态生成的，你需要在 Next.js 中使用 getStaticPaths 函数来预先生成所有可能的路由对应的 HTML 文件。

通过以上方法，你可以有效解决 Next.js 静态导出应用在 Nginx 上路由失效的问题，确保你的应用能够正确处理所有路由请求。 选择哪种解决方案取决于你的 Next.js 应用架构和需求。