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 /> 来利用 流式渲染。

当从页面导出 getServerSideProps 或 getInitialProps 时，它将被标记为动态。

版本历史

版本	更改
v15.2.0	改进了屏幕指示器，新增 position 选项。appIsrStatus、buildActivity 和 buildActivityPosition 选项已被弃用。
v15.0.0	添加了带有 appIsrStatus 选项的静态屏幕指示器。