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

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

• ランタイム情報に依存するDynamic APIsの存在
• ORMやデータベースドライバーへの呼び出しのようなキャッシュされていないデータリクエスト

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

バージョン履歴

Version	Changes
v15.2.0	新しいpositionオプションを備えたオンスクリーンインジケーターの改善。appIsrStatus、buildActivity、およびbuildActivityPositionオプションは廃止されました。
v15.0.0	appIsrStatusオプションを備えた静的オンスクリーンインジケーターが追加されました。