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 は、ルートがビルド時にプリレンダリングされるかどうかを示す静的インジケーターを画面の隅に表示します。これにより、ルートが静的か動的かを簡単に理解でき、静的レンダリングをオプトアウトしたルートを識別できます。

アプリフォルダー構造

インジケーターを閉じるボタンをクリックすると、1時間 localStorage に設定が記憶され、一時的に非表示にできます。完全に無効にするには、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 を使用してアプリケーションをビルドし、ターミナルの出力を確認することで、ルートが静的または動的であることを確認できます。静的（またはプリレンダリング）ルートは ○ 記号、動的ルートは ƒ 記号で表示されます。例：

ビルド出力
Route (app)                              Size     First Load JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB
 
○  (Static)   静的コンテンツとしてプリレンダリング
ƒ  (Dynamic)  オンデマンドでサーバーレンダリング

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

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