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 路由对应的静态文件。以下是一些解决方案：
-
检查 Next.js 导出配置: 确认你的 Next.js next.config.js 文件中 output 配置正确，并且静态导出过程成功生成了所有路由对应的 HTML 文件。 仔细检查是否有任何构建错误或警告。
-
调整 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; } -
使用 Next.js API Routes: 对于动态内容或需要服务器端渲染的路由，使用 Next.js 的 API Routes，并让 Nginx 反向代理到 Next.js 服务器。 这对于需要服务器端逻辑的路由更为合适。
-
使用 Next.js 的 getStaticPaths: 如果你的路由是动态生成的，你需要在 Next.js 中使用 getStaticPaths 函数来预先生成所有可能的路由对应的 HTML 文件。
通过以上方法，你可以有效解决 Next.js 静态导出应用在 Nginx 上路由失效的问题，确保你的应用能够正确处理所有路由请求。 选择哪种解决方案取决于你的 Next.js 应用架构和需求。
