Resolvendo erro de importação de CSS em projetos Next.js com TypeScript

Recentemente, criei um projeto Next.js usando o comando padrão e, ao abrir no VS Code, comecei a receber um erro estranho: "Cannot find module or type declarations for side-effect import of './globals.css'". Isso aconteceu mesmo em projetos recém-criados, sem alterações manuais ou atualizações de dependências.

Depois de algumas buscas, percebi que o problema é comum quando o TypeScript não reconhece os tipos de importação de arquivos CSS. A solução mais prática foi criar uma declaração de módulo para arquivos CSS no meu projeto, adicionando um arquivo declarations.d.ts na raiz com o seguinte conteúdo: A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

declare module '*.css'. 

Isso resolveu lindamente o erro, sem precisar mexer nas configurações do Next ou do TypeScript. Acho que essa abordagem ajuda quem está começando a usar CSS modules com TypeScript, evitando o drama de erros que parecem sem solução.

Quem já passou por isso sabe que esses detalhes podem travar o fluxo de trabalho, então fica a dica para quem estiver iniciando com Next.js e TypeScript. É sempre bom ter um atalho para esses pequenos perrengues. 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. A decisão fica mais saudável quando o time consegue medir o impacto depois.

No seu time, já tiveram que criar declarações assim pra outros tipos de arquivos?