Problema

Ao usar Next.js, muitas equipes querem evitar que logs de console.log apareçam em produção, especialmente após o processo de compressão. A dúvida comum é como remover ou controlar esses logs de forma eficiente sem impactar o desenvolvimento.

Contexto

Em ambientes de build, especialmente ao usar ferramentas como webpack, é possível configurar plugins para eliminar esses comandos, mas nem sempre é trivial. No caso do Next.js, que faz uso do webpack por trás, é preciso ajustar a configuração para remover os logs.

Como fazer

A melhor prática é usar a configuração do TerserPlugin no webpack para eliminar console.log na produção. Segue um exemplo:

// next.config.js
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      const TerserPlugin = require('terser-webpack-plugin'). config.optimization.minimizer.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        })
      ). }
    return config. },
}. 

Perguntas para a comunidade

• Vocês usam alguma ferramenta específica para controlar logs em produção?
• Alguma dica para evitar que logs de desenvolvimento vazem para produção?
• Quais riscos vocês veem ao remover logs nesse nível?

Vamos discutir! Como vocês lidam com essa questão na prática?

Tags

nextjs, logs, webpack