Importar SVG em Next.js usando babel plugin inline react svg não é tão simples assim

Muita gente acha que basta instalar o plugin e tudo vai funcionar de boa, mas na hora de usar dá dor de cabeça. O problema geralmente não está no plugin em si, mas na forma como o Next.js lida com o Babel e a importação de SVG.

No meu time, tentamos usar o babel-plugin-inline-react-svg pra facilitar o uso de SVG inline, mas acabamos esbarrando em atributos inválidos, como 'data-*'. Parece que o Next.js, com seu Babel padrão, acaba não aceitando alguns atributos que o plugin tenta passar. A decisão fica mais saudável quando o time consegue medir o impacto depois.

A solução que encontramos foi ajustar a configuração do Babel, garantir que o plugin esteja na ordem certa, e também revisar as configurações do Next para aceitar esses atributos. Tem que ficar atento ao uso de atributos personalizados no SVG, porque o Next.js às vezes rejeita por padrão. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

Outro ponto importante é testar localmente com configurações mínimas antes de aplicar em produção. E vocês, já passaram por isso? Como resolveram? Acho que muitos ainda não perceberam que a documentação muitas vezes não cobre esses detalhes na hora de usar plugins em Next. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.