Menu

devIndicators

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

Types
  devIndicators: {
    appIsrStatus?: boolean, // 默认为 true
    buildActivity?: boolean, // 默认为 true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // 默认为 'bottom-right'
  },

appIsrStatus (静态指示器)

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

App 文件夹结构

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

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}
 
export default nextConfig
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}
 
module.exports = 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 构建应用，并检查终端输出来确认路由是静态的还是动态的。静态（或预渲染）路由将显示一个 ○ 符号，而动态路由将显示一个 ƒ 符号。例如：

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