在 Next.js 14 和 15 中，next.config.js 文件中的 output 選項扮演著越來越重要的角色。本文將深入探討 output 選項在與 App Router 配合使用時的工作原理，如何針對不同的環境和部署目標進行優化。

什么是 output 選項？

output 選項允許開發者控制 Next.js 應用的構建行為。在最新的版本中，output 提供了一種簡潔的方式來定義如何輸出應用的靜態資源、服務器端渲染邏輯以及優化后的打包文件。

可用的 output 配置選項

對于 Next.js 來說，output 選項提供了多種設置，以適應不同的部署模型：

• standalone：適用于自托管的部署。該選項將應用打包成一個較小的、兼容無服務器（serverless）的包，便于在自定義基礎設施或服務器環境中進行部署。
• export：該配置用于生成完全靜態的站點。適用于不需要服務器端功能的簡單應用，因為所有路由會在構建時預渲染并以靜態 HTML 的形式提供。

深入了解 Next.js 中的每個 output 選項

1. standalone

• 用途：適用于自托管或傳統服務器環境。
• 打包方式：將應用打包成一個緊湊的、自包含的包，減少依賴要求。
• 部署：適合所有依賴和服務器配置都可以一起處理的服務器。
• 最佳適用場景：需要靈活服務器控制的站點或應用。
• 使用方法：

運行 npm run build 命令后，Next.js 會在 .next 文件夾下生成一個 standalone 文件夾。這個文件夾可以獨立部署，無需安裝 node_modules。

將該文件夾轉移到服務器后，可以獨立運行該應用，而無需額外的依賴。

// next.config.js
module.exports = {
  output: 'standalone',
  reactStrictMode: true,
};

2. export

• 用途：用于創建一個完全靜態的站點，不涉及服務器端渲染。
• 輸出類型：每個路由都會被預渲染為靜態 HTML，從而生成高度優化的靜態資源。
• 部署：適合靜態文件托管平臺，如 Netlify 或 GitHub Pages，不需要服務器。
• 最佳適用場景：簡單的個人網站、博客或企業展示網站等無動態數據的站點。
• 使用方法：

運行 next build && next export 來生成一個包含靜態 HTML 文件的 out 文件夾。

將 out 文件夾托管到任何靜態文件服務器上，便可高效、低成本地部署。

// next.config.js
module.exports = {
  output: 'export',
  trailingSlash: true, // 確保 URL 結尾有斜杠
};

示例配置

使用 standalone 模式與 App Router

在 standalone 輸出模式下，當與 App Router 一起使用時，應用會被打包成一個輕量級的自包含包。每個路由會被編譯為獨立的單元，從而最小化在資源有限的環境下部署整個應用的開銷。

// next.config.js
module.exports = {
  output: 'standalone',
  reactStrictMode: true,
};

使用 export 模式與靜態頁面

在 export 模式下，所有路由都會在構建時預渲染。這非常適合靜態站點，其中所有路由被預先構建為靜態 HTML 文件。此配置將顯著降低服務器成本并提升加載速度。

// next.config.js
module.exports = {
  output: 'export',
  trailingSlash: true, // 確保 URL 結尾有斜杠
};

針對特定用例的配置

每個 output 設置都有其獨特的優勢，取決于應用的結構和需求：

• 動態內容應用：對于需要動態數據的應用（例如電商網站或需要頻繁更新的博客），standalone 模式可能是最佳選擇。
• 靜態站點生成 (SSG)：對于博客或個人網站等內容變化較少的靜態站點，export 模式生成靜態 HTML 文件能夠提供最佳的性能。
• 多平臺部署：在多個平臺上部署時，使用 standalone 可以提供更好的靈活性，尤其是在自托管環境中。

總結

理解 next.config.js 中的 output 選項能夠幫助開發者充分利用 Next.js 中的最新功能，尤其是在與 App Router 配合使用時。無論是追求無服務器架構的可擴展性，還是簡化靜態站點的生成，合理配置 output 選項都能顯著提高應用的性能和部署靈活性。