devIndicators

devIndicators 允許你設定開發期間顯示當前路由相關資訊的螢幕指示器。

Types

  devIndicators: false | {
    position?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // 預設為 'bottom-left',
  },

將 devIndicators 設為 false 會隱藏指示器，但 Next.js 仍會顯示遇到的任何建置或執行階段錯誤。

疑難排解

指示器未將路由標記為靜態

如果你預期某個路由應為靜態，但指示器將其標記為動態，可能是該路由選擇退出靜態渲染。

你可以透過執行 next build --debug 建置應用程式，並檢查終端機輸出，來確認路由是靜態還是動態。靜態（或預渲染）路由會顯示 ○ 符號，而動態路由會顯示 ƒ 符號。例如：

Build Output

Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

路由選擇退出靜態渲染有兩個主要原因：

使用了依賴執行階段資訊的動態 API
未快取的資料請求，例如呼叫 ORM 或資料庫驅動程式

檢查你的路由是否滿足這些條件，如果無法靜態渲染路由，可以考慮使用 loading.js 或 <Suspense /> 來實現串流。

版本歷史

版本	變更內容
`v15.2.0`	改進螢幕指示器並新增 `position` 選項。`appIsrStatus`、`buildActivity` 和 `buildActivityPosition` 選項已被棄用。
`v15.0.0`	新增靜態螢幕指示器並提供 `appIsrStatus` 選項。

devIndicators

疑難排解

指示器未將路由標記為靜態

版本歷史

On this page