Next.js(15.0.3)のStatic Indicatorを非表示にする 👀 - みかづきブログ・カスタム

みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.js(15.0.3)のStatic Indicatorを非表示にする 👀

いつも通り、

npx create-next-app .

で、Next.jsのプロジェクトを作成し、

npm run dev

で、開発サーバを起動したところ、

左下に謎のアイコンが表示されるようになっていました。
.nextjs-toastというクラス名が振られています。

なんだこれは。と思いましたが、すべてドキュメントに書いてありました。

nextjs.org

Next.js displays a static indicator in the bottom corner of the screen that signals if a route will be prerendered at build time. This makes it easier to understand whether a route is static or dynamic, and for you to identify if a route opts out of static rendering.

You can temporarily hide the indicator by clicking the close indicator which will remember your preference in localStorage for 1 hour. To permanently disable it, you can use the config option in next.config.js:

https://nextjs.org/docs/app/api-reference/next-config-js/devIndicators#appisrstatus-static-indicator より引用

Next.js は、ビルド時にルートが事前レンダリングされるかどうかを示す静的インジケーターを画面の下隅に表示します。これにより、ルートが静的か動的かを理解しやすくなり、ルートが静的レンダリングをオプトアウトするかどうかを識別しやすくなります。

閉じるインジケーターをクリックすると、インジケーターを一時的に非表示にすることができます。これにより、設定は localStorage に 1 時間記憶されます。これを永続的に無効にするには、next.config.js の config オプションを使用します。

Google翻訳にて翻訳

つまり、永遠に消し去りたい場合は、

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
};

export default nextConfig;

next.config.tsのNextConfig.devIndicators.appIsrStatusをfalseにすればOKです。