Como Adicionar Vários Idiomas ao Seu App ou Site

Para adicionar vários idiomas a um app, mova cada trecho de texto da interface para arquivos de tradução (um por idioma), carregue-os com uma biblioteca de i18n e adicione um seletor de idioma que lembre a escolha. Para páginas públicas que você quer encontradas na busca, dê a cada idioma a sua própria URL, como /fr/, e conecte as versões com tags hreflang. Depois, cuide das partes que as pessoas costumam esquecer: datas, números e moedas, textos mais longos em alguns idiomas, escritas da direita para a esquerda e o conteúdo guardado no banco de dados.

Termos que você vai ouvir

• Internacionalização (i18n): preparar o código para suportar qualquer idioma — sem textos fixos no código, formatação sensível ao local e layouts flexíveis. O "18" é o número de letras entre o "i" e o "n".
• Localização (l10n): adaptar o app para um idioma ou mercado específico, principalmente a tradução, mas às vezes também moeda, imagens e textos legais.
• Locale: um idioma e, opcionalmente, uma região, como en-GB ou pt-BR.

Faça a i18n uma vez, e adicionar cada novo idioma passa a ser, na maior parte, trabalho de tradução.

Opções e trade-offs

Para a maioria dos apps, uma biblioteca i18n padrão com arquivos de tradução é a base certa. Faça rascunhos com tradução automática ou por IA, se quiser, e depois peça para falantes fluentes revisarem o que os clientes veem com mais frequência.

As partes de um app multilíngue

Arquivos de tradução

Em vez de <h1>Welcome back</h1>, o código diz t('dashboard.welcome'), e cada locale tem um arquivo com o texto:

{
  "dashboard": {
    "welcome": "Bem-vindo de volta, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} itens"
  }
}

Use placeholders para variáveis em vez de juntar pedaços de frases — a ordem das palavras muda entre idiomas. E use as regras de plural da biblioteca: o inglês tem duas formas (1 item, 2 itens), mas alguns idiomas têm três, quatro ou mais.

Formatando datas, números e dinheiro

Não formate isso manualmente. A API Intl do navegador formata para qualquer locale: 1,234.5 em inglês vira 1.234,5 em alemão; as datas mudam entre dia-primeiro e mês-primeiro; os símbolos de moeda trocam de lugar. Guarde datas em UTC e valores monetários como números com um código de moeda, e formate apenas na exibição.

Layout que se estica

O texto traduzido costuma ser mais longo que o inglês — especialmente em alemão e finlandês. Evite botões de largura fixa e rótulos cortados, e teste com o seu idioma mais longo.

Idiomas da direita para a esquerda

Árabe, hebraico, persa e urdu são lidos da direita para a esquerda. Defina dir="rtl" na página para esses locales e use propriedades lógicas do CSS (margin-inline-start em vez de margin-left; no Tailwind, ms-4 em vez de ml-4) para que o layout se espelhe sozinho. Ícones que indicam direção, como setas, também precisam ser invertidos.

Seletor de idioma e detecção

Mostre um seletor em todas as páginas, com o nome de cada idioma escrito nele mesmo ("Deutsch", "Français", "العربية"), em vez de bandeiras — bandeiras representam países, não idiomas. Detecte o idioma preferido do navegador na primeira visita para sugerir uma versão, mas deixe a escolha explícita do visitante prevalecer e lembre dela.

URLs e SEO

Para páginas que você quer nos resultados de busca, cada idioma precisa de sua própria URL. Em setembro de 2026, a orientação do Google para sites multilíngues é:

• URLs separadas por idioma — subdiretórios (example.com/fr/) são o mais simples; subdomínios e domínios de país também funcionam. Parâmetros de URL (?lang=fr) não são recomendados.
• Não troque o idioma só por cookie ou configuração do navegador; o rastreador do Google pode nunca ver as outras versões.
• Não faça redirecionamento automático por idioma; conecte as versões com links.
• Use hreflang para dizer ao Google quais páginas são traduções umas das outras. Cada versão precisa se listar e listar todas as outras, ou as anotações podem ser ignoradas. Adicione x-default para a página de fallback.
• O Google detecta o idioma de uma página pelo conteúdo visível, não pelo lang ou pelo hreflang — então traduza a página inteira, não só o menu.

Ainda assim, defina <html lang="fr"> em cada versão: leitores de tela usam isso para escolher a pronúncia correta, e isso é um requisito de acessibilidade.

Telas de app com login não precisam ser indexadas, então, para elas, guardar o idioma no perfil do usuário é suficiente. Veja SEO para sites feitos com IA para conseguir que as páginas públicas sejam rastreadas.

Conteúdo no banco de dados

O texto da interface fica em arquivos; conteúdos como nomes de produtos, posts do blog e categorias ficam no banco de dados. Dois padrões comuns:

• Uma tabela de traduções: product_translations (product_id, locale, name, description). Organizada e escala para muitos idiomas.
• Uma coluna JSON por campo: name: {"en": "...", "fr": "..."}. Mais simples para poucos idiomas.

Decida o que acontece quando falta uma tradução — normalmente, volte ao idioma padrão em vez de mostrar um espaço em branco.

E-mails e notificações

Guarde o idioma de cada usuário e use-o também em e-mails, notificações e PDFs. É fácil traduzir o app e esquecer que o e-mail de boas-vindas ainda chega em inglês.

Prompts que funcionam

Adicione internacionalização com react-i18next. Mova cada texto visível ao usuário para locales/en.json com chaves organizadas por namespace, use interpolação e regras de plural em vez de concatenar strings, e formate datas, números e preços com Intl usando o locale atual. Não altere nenhum texto ainda.

Adicione francês e alemão. Páginas públicas de marketing ganham os prefixos de URL /fr/ e /de/, com o inglês na raiz, links hreflang em todas as páginas (incluindo a autorreferência e x-default), e html lang definido por página. Adicione um seletor de idioma mostrando o nome nativo de cada idioma. Para páginas com login, guarde o idioma no perfil do usuário.

Adicione árabe com suporte da direita para a esquerda: defina dir="rtl" para o árabe, troque margens e paddings à esquerda e à direita por propriedades lógicas, espelhe ícones direcionais e confira se formulários e tabelas continuam legíveis.

Passo a passo

1. Escolha seu primeiro idioma extra com base na demanda real — onde estão seus visitantes ou clientes.
2. Internacionalize o código: mova os textos para arquivos, adicione plurais e formatação com Intl. Publique só em inglês e confira que nada mudou.
3. Defina a estrutura de URLs das páginas públicas e adicione hreflang.
4. Traduza: faça um rascunho com tradução automática ou por IA e depois revise com um falante fluente. Dê contexto aos tradutores — uma palavra como "Book" é substantivo em uma tela e verbo em outra.
5. Traduza o conteúdo do banco de dados e defina os fallbacks.
6. Localize o resto: e-mails, mensagens de erro, páginas legais, imagens com texto.
7. Teste cada idioma na largura de celular e, se for o caso, da direita para a esquerda.
8. Crie um processo para que novos recursos saiam com traduções, e não meses depois.

Erros comuns

• Concatenar frases ("Você tem " + n + " mensagens"), o que quebra em outros idiomas.
• Texto fixo deixado nos componentes, em mensagens de erro e textos de validação.
• Formatar datas e preços manualmente.
• Bandeiras para representar idiomas e redirecionamentos automáticos que prendem as pessoas na versão errada.
• Uma única URL para todos os idiomas em páginas que você quer indexadas.
• Faltar os links de retorno do hreflang, então o Google ignora as anotações.
• Traduzir a interface, mas não o conteúdo, ou o contrário.
• Tradução automática não revisada em páginas de preços, jurídicas e de checkout.

Checklist de multilíngue

• Nenhum texto visível ao usuário fixo no código; regras de plural e placeholders usados
• Datas, números e moedas formatados com Intl
• Seletor de idioma com nomes nativos em todas as páginas; escolha lembrada
• URLs separadas por idioma para páginas públicas; sem redirecionamentos forçados
• hreflang em cada versão, incluindo a autorreferência e x-default
• html lang (e dir="rtl", quando necessário) definido por página
• Conteúdo do banco de dados traduzido, com fallbacks sensatos
• E-mails e notificações enviados no idioma do usuário
• Textos voltados ao cliente revisados por um falante fluente

Vários idiomas no Mythex

No Mythex, você adiciona idiomas pedindo no chat — não há um painel de tradução separado — então os prompts acima funcionam como estão. Faça primeiro a etapa de internacionalização e confira no Preview antes de adicionar idiomas; é uma refatoração grande, e um checkpoint no chat dá um ponto para voltar se algo quebrar (chat e checkpoints). Se quiser que o app traduza conteúdo automaticamente com uma IA ou API de tradução, isso usa a sua própria chave de API, guardada nas configurações do projeto (variáveis de ambiente e segredos); como usar APIs de LLM explica os custos. Publique novamente quando os novos idiomas estiverem prontos.

Perguntas