メインコンテンツまでスキップ

devIndicators

devIndicators は、開発中に表示される現在のルートに関するコンテキストを提供する画面上のインジケーターを設定できます。

Types
  devIndicators: {
    appIsrStatus?: boolean, // 初期値は true
    buildActivity?: boolean, // 初期値は true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // 初期値は 'bottom-right'
  },

appIsrStatus (Static Indicator : 静的インジケーター)​

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 (Compilation Indicator : コンパイルインジケーター)​

コードを編集すると、Next.js がアプリケーションをコンパイルする際に、コンパイルインジケーターがページの右下隅に表示されます。

Good to know: このインジケーターは開発モードでのみ表示され、本番モードでアプリをビルドおよび実行している際は表示されません；

このインジケーターが、たとえばチャットランチャーと競合する場合などに、ページ上で誤った位置に表示されることがあります。その位置を変更するには、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

ルートが静的レンダリングをオプトアウトする理由は2つあります：

これらの条件をルートで確認し、ルートを静的にレンダリングすることができない場合は、loading.js または <Suspense /> を使用してストリーミングを活用することを検討してください。