Next.JS 靜態站點部署到 nginx 后路由失效問題及解決方法
使用 Next.js 靜態導出部署到 Nginx 服務器后，訪問特定路由卻跳轉到首頁，這是一個常見問題。本文將分析原因并提供解決方案。
問題描述：
假設 Next.js 應用包含 /test 路由，本地開發環境運行正常。但靜態導出后部署到 Nginx，訪問 /test 卻跳轉到首頁。這與 vue 的 history 模式不同，后者通常通過 Nginx 配置的 404 跳轉到首頁來解決。
原因分析：
Nginx 的 try_files 指令嘗試訪問指定文件或目錄。若 /test 對應文件不存在，Nginx 會根據配置回退到 /index.html，導致跳轉到首頁。這是因為 Next.js 靜態導出生成的并非完整的 SPA 應用，而是預渲染的 HTML 文件。
解決方案：
-
檢查 Next.js 配置及導出結果： 確保 Next.js 項目正確配置了路由，并且靜態導出包含 /test 路由對應的文件。檢查 next.config.js 或 package.json 中的 output: “export” 配置是否正確，以及生成的 out 目錄下是否存在 /test 路由對應的文件。 如果文件缺失，則需要檢查 Next.js 的路由配置和頁面生成邏輯。
-
優化 Nginx 配置： 修改 Nginx 配置，避免將 404 錯誤直接跳轉到首頁。可以嘗試以下配置：
location / { try_files $uri $uri/ /404.html; # 將 404 錯誤指向自定義的 404 頁面 }或者，更精確地處理路由：
location /test { try_files $uri $uri/ /index.html; # 僅對 /test 路由處理 } location / { try_files $uri $uri/ /index.html; # 其他路由處理 }需要根據實際情況調整 try_files 指令，確保正確處理所有路由。 創建 404.html 文件并將其放置在靜態資源目錄下。
-
使用 Next.js API Routes 或服務器端渲染： 對于需要動態內容或服務器端渲染的路由，避免使用靜態導出。可以使用 Next.js 的 API Routes 處理動態請求，或者直接使用 Next.js 服務器進行部署，并使用 Nginx 作為反向代理。
-
檢查 next export 命令的輸出： 運行 next export 命令時，仔細檢查是否有任何錯誤或警告信息，這些信息可能提示路由配置或導出過程中的問題。
通過以上方法，可以有效解決 Next.js 靜態導出在 Nginx 上的路由問題，確保所有路由都能正確訪問。 如果問題仍然存在，需要進一步檢查 Next.js 應用的代碼和 Nginx 的配置，并提供更多細節以便進行更精確的診斷。
