devIndicators
devIndicators
允許您配置開發期間顯示當前路由上下文資訊的螢幕指示器。
devIndicators: false | {
position?: 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left', // 預設為 'bottom-left',
},
將 devIndicators
設為 false
會隱藏指示器,但 Next.js 仍會持續顯示遇到的任何建置或執行時錯誤。
疑難排解
指示器未將路由標記為靜態
如果您預期某個路由應為靜態,但指示器將其標記為動態,很可能是該路由選擇退出了靜態渲染。
您可以透過執行 next build --debug
建置應用程式,並檢查終端機輸出,來確認路由是 靜態 還是 動態。靜態(或預渲染)路由會顯示 ○
符號,而動態路由則顯示 ƒ
符號。例如:
Route (app) Size First Load JS
┌ ○ /_not-found 0 B 0 kB
└ ƒ /products/[id] 0 B 0 kB
○ (Static) 預渲染為靜態內容
ƒ (Dynamic) 依需求進行伺服器渲染
路由可能選擇退出靜態渲染的原因有二:
- 使用了依賴執行時資訊的 動態 API
- 未快取的資料請求,例如呼叫 ORM 或資料庫驅動程式
檢查您的路由是否符合這些條件,如果無法靜態渲染路由,可以考慮使用 loading.js
或 <Suspense />
來實現 串流。
版本歷史
版本 | 變更 |
---|---|
v15.2.0 | 改進螢幕指示器並新增 position 選項。appIsrStatus 、buildActivity 和 buildActivityPosition 選項已被棄用。 |
v15.0.0 | 新增靜態螢幕指示器並提供 appIsrStatus 選項。 |