🏡 Home

Next.js Note: Removing console logs on production

In my projects, I often use console.log to debug output or trace some behaviors. It is tremendously helpful when developing. But if I'm not careful they can spill over to production environments, which is undesirable.

In my linter, I have set up some rules to warn when there are console.log in the project codebase. However, it doesn't seem to be enough. Because sometimes there are occasions where they are needed.

I found out a babel plugin for removing console.log, transform-remove-console, and recently incorporating them in my projects. I think this will improve the production build quality.

This is my setup for the babel plugin.

  • Install the plugin as a development dependency

    yarn add --dev babel-plugin-transform-remove-console
  • Create (if not existed) .babelrc file with this content

    {
      "presets": ["next/babel"],
    
      "env": {
        "production": {
          "plugins": ["transform-remove-console"]
        }
      }
    }