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 應用架構和需求。
