Next.jsで本番では console.logを出さないができるらしいのでやってみた

TL;DR

• next.config.js(mjs)で設定をすることで対応可能
• ログレベルを変えて、console.log(), console.info(), console.warn(), console.error() それぞれについても確認してみた

まずはローカルでログ出力

ServerComponentだとターミナルのログに出力されるので、ClientComponentにする必要はあったが、下記の通り出力

本番環境でログ出力確認

本番環境でのログ出力を制御するため、 next.config.js(mjs)を下記のように修正

next.config.js

const nextConfig = {
    compiler: {
        removeConsole: process.env.NODE_ENV === "production",
    }
};

module.exports = nextConfig;

修正後にVercelへデプロイ🚀
ログレベル関係なく全く出力されなくなりましたね 👀

ログレベル単位では出力制御できるのか❓️

※ログレベル？がよくわからない人へ

• console.log(): ログレベル関係なく一般的なログを出力
• console.info(): 情報メッセージ。アプリケーションの正常な動作を示す。
• console.warn(): 警告メッセージ。潜在的な問題を示す。
• console.error(): エラーメッセージ。実際のエラーや例外を示す。

本番環境の場合のみ、エラーレベルのログのみを出力し、それ以外は全てのログを出す設定し、
修正後にVercelへデプロイ🚀

next.config.js

const nextConfig = {
    compiler: {
        removeConsole: process.env.NODE_ENV === "production"
        ? {
            exclude: ["error"],
          }
        : false,
    }
};

module.exports = nextConfig;

できましたね👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏

まとめ

この設定を入れておけば本番環境で余計なログが出力されない状態にできる🙌
チーム開発をしてるときにも便利ですね👏