devIndicators

devIndicators 允许你配置屏幕上的指示器，这些指示器在开发过程中提供了有关你正在查看的当前路由的上下文。

类型

  devIndicators: {
    appIsrStatus?: boolean, // defaults to true
    buildActivity?: boolean, // defaults to true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // defaults to 'bottom-right'
  },

`appIsrStatus`（静态指示器）

此选项在 Next.js canary 中可用。

Next.js 在屏幕的底部角落显示一个静态指示器，指示路由是否将在构建时预渲染。这使得更容易理解路由是静态的还是动态的，并让你识别路由是否选择退出静态渲染。

你可以通过点击关闭指示器暂时隐藏指示器，该指示器将在localStorage中记住你的偏好 1 小时。要永久禁用它，你可以在next.config.js中使用配置选项

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}
 
export default nextConfig

`buildActivity`（编译指示器）

当你编辑代码时，并且 Next.js 正在编译应用程序，页面右下角会出现一个编译指示器。

注意：此指示器仅在开发模式下存在，在生产模式下构建和运行应用程序时不会出现。

在某些情况下，此指示器可能会在你的页面上放置错误，例如，当与聊天启动器冲突时。要更改其位置，请打开next.config.js并将devIndicators对象中的buildActivityPosition设置为bottom-right（默认）、bottom-left、top-right或top-left

next.config.js

module.exports = {
  devIndicators: {
    buildActivityPosition: 'bottom-right',
  },
}

在某些情况下，此指示器可能对你没有用。要将其删除，请打开next.config.js并在devIndicators对象中禁用buildActivity配置

next.config.js

module.exports = {
  devIndicators: {
    buildActivity: false,
  },
}

故障排除

静态路由未显示指示器

如果你期望路由是静态的并且指示器已启用但未显示，则该路由可能已选择退出静态渲染。

你可以通过使用next build --debug构建应用程序并在终端中检查输出，来确认路由是静态的还是动态的。静态（或预渲染）路由将显示一个○符号，而动态路由将显示一个ƒ符号。例如

构建输出

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 /> 来利用流式传输。