在 Next.js 14 和 15 中，next.config.js 文件中的 output 選項(xiàng)扮演著越來(lái)越重要的角色。本文將深入探討 output 選項(xiàng)在與 App Router 配合使用時(shí)的工作原理，如何針對(duì)不同的環(huán)境和部署目標(biāo)進(jìn)行優(yōu)化。

什么是 output 選項(xiàng)？

output 選項(xiàng)允許開(kāi)發(fā)者控制 Next.js 應(yīng)用的構(gòu)建行為。在最新的版本中，output 提供了一種簡(jiǎn)潔的方式來(lái)定義如何輸出應(yīng)用的靜態(tài)資源、服務(wù)器端渲染邏輯以及優(yōu)化后的打包文件。

可用的 output 配置選項(xiàng)

對(duì)于 Next.js 來(lái)說(shuō)，output 選項(xiàng)提供了多種設(shè)置，以適應(yīng)不同的部署模型：

• standalone：適用于自托管的部署。該選項(xiàng)將應(yīng)用打包成一個(gè)較小的、兼容無(wú)服務(wù)器（serverless）的包，便于在自定義基礎(chǔ)設(shè)施或服務(wù)器環(huán)境中進(jìn)行部署。
• export：該配置用于生成完全靜態(tài)的站點(diǎn)。適用于不需要服務(wù)器端功能的簡(jiǎn)單應(yīng)用，因?yàn)樗新酚蓵?huì)在構(gòu)建時(shí)預(yù)渲染并以靜態(tài) HTML 的形式提供。

深入了解 Next.js 中的每個(gè) output 選項(xiàng)

1. standalone

• 用途：適用于自托管或傳統(tǒng)服務(wù)器環(huán)境。
• 打包方式：將應(yīng)用打包成一個(gè)緊湊的、自包含的包，減少依賴要求。
• 部署：適合所有依賴和服務(wù)器配置都可以一起處理的服務(wù)器。
• 最佳適用場(chǎng)景：需要靈活服務(wù)器控制的站點(diǎn)或應(yīng)用。
• 使用方法：

運(yùn)行 npm run build 命令后，Next.js 會(huì)在 .next 文件夾下生成一個(gè) standalone 文件夾。這個(gè)文件夾可以獨(dú)立部署，無(wú)需安裝 node_modules。

將該文件夾轉(zhuǎn)移到服務(wù)器后，可以獨(dú)立運(yùn)行該應(yīng)用，而無(wú)需額外的依賴。

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

2. export

• 用途：用于創(chuàng)建一個(gè)完全靜態(tài)的站點(diǎn)，不涉及服務(wù)器端渲染。
• 輸出類型：每個(gè)路由都會(huì)被預(yù)渲染為靜態(tài) HTML，從而生成高度優(yōu)化的靜態(tài)資源。
• 部署：適合靜態(tài)文件托管平臺(tái)，如 Netlify 或 GitHub Pages，不需要服務(wù)器。
• 最佳適用場(chǎng)景：簡(jiǎn)單的個(gè)人網(wǎng)站、博客或企業(yè)展示網(wǎng)站等無(wú)動(dòng)態(tài)數(shù)據(jù)的站點(diǎn)。
• 使用方法：

運(yùn)行 next build && next export 來(lái)生成一個(gè)包含靜態(tài) HTML 文件的 out 文件夾。

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

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

示例配置

使用 standalone 模式與 App Router

在 standalone 輸出模式下，當(dāng)與 App Router 一起使用時(shí)，應(yīng)用會(huì)被打包成一個(gè)輕量級(jí)的自包含包。每個(gè)路由會(huì)被編譯為獨(dú)立的單元，從而最小化在資源有限的環(huán)境下部署整個(gè)應(yīng)用的開(kāi)銷。

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

使用 export 模式與靜態(tài)頁(yè)面

在 export 模式下，所有路由都會(huì)在構(gòu)建時(shí)預(yù)渲染。這非常適合靜態(tài)站點(diǎn)，其中所有路由被預(yù)先構(gòu)建為靜態(tài) HTML 文件。此配置將顯著降低服務(wù)器成本并提升加載速度。

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

針對(duì)特定用例的配置

每個(gè) output 設(shè)置都有其獨(dú)特的優(yōu)勢(shì)，取決于應(yīng)用的結(jié)構(gòu)和需求：

• 動(dòng)態(tài)內(nèi)容應(yīng)用：對(duì)于需要?jiǎng)討B(tài)數(shù)據(jù)的應(yīng)用（例如電商網(wǎng)站或需要頻繁更新的博客），standalone 模式可能是最佳選擇。
• 靜態(tài)站點(diǎn)生成 (SSG)：對(duì)于博客或個(gè)人網(wǎng)站等內(nèi)容變化較少的靜態(tài)站點(diǎn)，export 模式生成靜態(tài) HTML 文件能夠提供最佳的性能。
• 多平臺(tái)部署：在多個(gè)平臺(tái)上部署時(shí)，使用 standalone 可以提供更好的靈活性，尤其是在自托管環(huán)境中。

總結(jié)

理解 next.config.js 中的 output 選項(xiàng)能夠幫助開(kāi)發(fā)者充分利用 Next.js 中的最新功能，尤其是在與 App Router 配合使用時(shí)。無(wú)論是追求無(wú)服務(wù)器架構(gòu)的可擴(kuò)展性，還是簡(jiǎn)化靜態(tài)站點(diǎn)的生成，合理配置 output 選項(xiàng)都能顯著提高應(yīng)用的性能和部署靈活性。