Next.js CLI

Next.js CLI 允許您啟動、建構和匯出應用程式。

要取得可用的 CLI 指令列表,請在專案目錄中執行以下命令:

Terminal
npx next -h

(npx 隨 npm 5.2+ 及以上版本提供)

輸出結果應類似如下:

Terminal
用法
  $ next <>

可用指令
  build, start, export, dev, lint, telemetry, info

選項
  --version, -v   版本號
  --help, -h      顯示此訊息

欲了解更多資訊,請使用 --help 標記執行指令
  $ next build --help

您可以傳遞任何 node 參數next 指令:

Terminal
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next

須知:直接執行 next 等同於執行 next dev

建構

next build 會建立應用程式的優化生產版本。輸出結果會顯示每個路由的相關資訊。

  • 大小 - 在客戶端導航至頁面時下載的資源大小。每個路由的大小僅包含其相依資源。
  • 首次載入 JS - 從伺服器訪問頁面時下載的資源大小。所有路由共享的 JS 量會單獨顯示為一個指標。

這些數值皆以 gzip 壓縮計算。首次載入會以綠色、黃色或紅色標示。建議保持綠色以確保應用程式效能。

您可以在 next build 中使用 --profile 標記來啟用 React 的生產環境分析功能。此功能需要 Next.js 9.5

Terminal
next build --profile

啟用後,您可以像在開發環境中一樣使用分析工具。

您可以在 next build 中使用 --debug 標記來啟用更詳細的建構輸出。此功能需要 Next.js 9.5.3:

Terminal
next build --debug

啟用此標記後,將顯示額外的建構輸出,如重寫規則、重定向和標頭資訊。

開發

next dev 會以開發模式啟動應用程式,並提供熱重載、錯誤報告等功能:

應用程式預設會啟動於 http://localhost:3000。可以使用 -p 變更預設埠號,如下所示:

Terminal
npx next dev -p 4000

或使用 PORT 環境變數:

Terminal
PORT=4000 npx next dev

須知PORT 無法在 .env 中設定,因為 HTTP 伺服器的啟動早於其他程式碼的初始化。

您也可以設定與預設值 0.0.0.0 不同的主機名稱,這對於讓網路上的其他裝置訪問應用程式很有用。可以使用 -H 變更預設主機名稱,如下所示:

Terminal
npx next dev -H 192.168.1.2

生產環境

next start 會以生產模式啟動應用程式。應用程式應先使用 next build 進行編譯。

應用程式預設會啟動於 http://localhost:3000。可以使用 -p 變更預設埠號,如下所示:

Terminal
npx next start -p 4000

或使用 PORT 環境變數:

Terminal
PORT=4000 npx next start

須知

  • PORT 無法在 .env 中設定,因為 HTTP 伺服器的啟動早於其他程式碼的初始化。

  • next start 無法與 output: 'standalone'output: 'export' 一起使用。

保持連線逾時設定

當 Next.js 部署在下游代理(如負載平衡器 AWS ELB/ALB)後方時,務必將 Next.js 底層 HTTP 伺服器的 keep-alive 逾時設定為 大於 下游代理的逾時值。否則,一旦 TCP 連線達到 keep-alive 逾時,Node.js 會立即終止該連線而不通知下游代理。這會導致代理嘗試重用已被 Node.js 終止的連線時出現錯誤。

要設定生產環境 Next.js 伺服器的逾時值,請將 --keepAliveTimeout(以毫秒為單位)傳遞給 next start,如下所示:

Terminal
npx next start --keepAliveTimeout 70000

程式碼檢查

next lint 會對 pages/app/components/lib/src/ 目錄中的所有檔案執行 ESLint。如果應用程式中尚未設定 ESLint,它還會提供引導式設定來安裝必要的相依套件。

如果您有其他需要檢查的目錄,可以使用 --dir 標記指定:

Terminal
next lint --dir utils

遙測

Next.js 會收集完全匿名的遙測資料以了解一般使用情況。參與此匿名計畫是自願的,如果您不想分享任何資訊,可以選擇退出。

要了解更多關於遙測的資訊,請閱讀此文件

系統資訊

next info 會列印當前系統的相關細節,可用於回報 Next.js 的錯誤。這些資訊包括作業系統平台/架構/版本、二進位檔(Node.js、npm、Yarn、pnpm)和 npm 套件版本(nextreactreact-dom)。

在專案根目錄執行以下指令:

Terminal
next info

將獲得類似以下的資訊:

Terminal

作業系統:
  平台:linux
  架構:x64
  版本:#22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
二進位檔:
  Node:16.13.0
  npm:8.1.0
  Yarn:1.22.17
  pnpm:6.24.2
相關套件:
  next:12.0.8
  react:17.0.2
  react-dom:17.0.2

這些資訊應貼到 GitHub Issues 中。

為了診斷安裝問題,您可以執行 next info --verbose 來列印關於系統和 next 相關套件安裝的額外資訊。

On this page