Next.jsの左下のアイコン (devIndicators) を非表示にする。

左下のアイコン (devIndicators) とは

Next.jsの開発モードでは、画面の左下に小さなバッジのようなアイコンが表示されることがあります。これは「devIndicators」と呼ばれ、パフォーマンス情報やビルド状態を視覚的に表示してくれる便利な機能です。

devIndicatorsをクリックすると以下の項目を確認することができます。

項目	説明
Route	現在のページが 静的に生成されているか（Static） それとも 動的（Dynamic） かを表示
Turbopack	現在のビルドツール（この例では Turbopack）が有効かどうかを表示
Preferences	インジケーターの設定変更などができるメニューにアクセス可能

設定変更方法

devIndicatorsを非表示にしたい場合、next.config.tsを以下のように修正することで非表示にすることができます。

非表示方法

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

位置を移動

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  devIndicators: {
    position: "top-right", // top-right, bottom-right, top-left, bottom-left
  },
};

export default nextConfig;

devIndicatorsから直接修正することも可能

あとがき

開発中devIndicatorsを非表示にするため方法を検索したのですが、名称が分からなかったため、期待する検索結果を得ることができませんでした。
他の人が同じような事象に遭遇した場合、別のキーワードでも検索できるようメモ用に公開します。

参考

https://nextjs.org/docs/app/api-reference/config/next-config-js/devIndicators