Como Adicionar Várias Línguas à Sua App ou Site

Para adicionar várias línguas a uma app, passe todo o texto da interface para ficheiros de tradução (um por língua), carregue-os com uma biblioteca de i18n e acrescente um seletor de idioma que memorize a escolha. Para as páginas públicas que quer encontrar na pesquisa, dê a cada língua o seu próprio URL, como /fr/, e ligue as versões com etiquetas hreflang. Depois, trate das partes que as pessoas costumam esquecer: datas, números e moedas, textos mais longos em algumas línguas, escritas da direita para a esquerda e conteúdos guardados na base de dados.

Termos que vai ouvir

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

Faça a i18n uma vez, e acrescentar cada nova língua passa a ser sobretudo trabalho de tradução.

Opções e compromissos

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

As partes de uma app multilingue

Ficheiros de tradução

Em vez de <h1>Bem-vindo de volta</h1>, o código diz t('dashboard.welcome'), e cada idioma tem um ficheiro com o texto:

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

Use marcadores para as variáveis em vez de juntar fragmentos de frases — a ordem das palavras varia entre línguas. E use as regras de plural da biblioteca: o inglês tem duas formas (1 item, 2 items), mas algumas línguas têm três, quatro ou mais.

Formatar datas, números e dinheiro

Não formate estes valores à mão. A API Intl incluída no navegador formata para qualquer locale: 1,234.5 em inglês é 1.234,5 em alemão; as datas mudam entre dia-primeiro e mês-primeiro; os símbolos das moedas mudam de posição. Guarde as datas em UTC e o dinheiro como números com um código de moeda, e formate apenas para apresentação.

Layout que se adapta

O texto traduzido costuma ser mais longo do que em inglês — sobretudo em alemão e finlandês. Evite botões de largura fixa e rótulos cortados, e teste com a língua mais longa.

Línguas da direita para a esquerda

O árabe, o hebraico, o persa e o urdu lêem-se da direita para a esquerda. Defina dir="rtl" na página para esses locales e use propriedades lógicas de 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. Os ícones que indicam direção, como setas, também precisam de ser invertidos.

Seletor de idioma e deteção

Mostre um seletor em todas as páginas, com o nome de cada língua escrito nessa própria língua («Deutsch», «Français», «العربية») e não com bandeiras — as bandeiras representam países, não línguas. Deteta o idioma preferido do navegador na primeira visita para sugerir uma versão, mas deixe a escolha explícita do visitante prevalecer e memorize-a.

URLs e SEO

Para as páginas que quer nos resultados de pesquisa, cada língua precisa do seu próprio URL. A partir de setembro de 2026, as orientações da Google para sites multilingues são:

• URLs separados por língua — os subdiretórios (exemplo.com/fr/) são o mais simples; os subdomínios e os domínios por país também funcionam. Os parâmetros de URL (?lang=fr) não são recomendados.
• Não mude de idioma apenas por cookie ou pelas definições do navegador; o rastreador da Google pode nunca ver as outras versões.
• Não redirecione automaticamente por idioma; ligue as versões entre si.
• Use hreflang para indicar à Google quais páginas são traduções umas das outras. Cada versão deve listar-se a si própria e todas as outras, senão as anotações podem ser ignoradas. Acrescente x-default para a página de recurso.
• A Google deteta o idioma de uma página pelo conteúdo visível, não pelo lang nem pelo hreflang — por isso traduza a página inteira, não apenas o menu.

Defina na mesma <html lang="fr"> em cada versão: os leitores de ecrã usam-no para escolher a pronúncia correta, o que é um requisito de acessibilidade.

As telas da app com sessão iniciada não precisam de ser indexadas, por isso, para essas, guardar o idioma no perfil do utilizador é suficiente. Veja SEO para sites criados com IA para conseguir que as páginas públicas sejam rastreadas.

Conteúdo na base de dados

O texto da interface fica em ficheiros; conteúdos como nomes de produtos, artigos de blogue e categorias ficam na base de dados. Dois padrões comuns:

• Uma tabela de traduções: product_translations (product_id, locale, name, description). Limpa e escalável para muitas línguas.
• Uma coluna JSON por campo: name: {"en": "...", "fr": "..."}. Mais simples para poucas línguas.

Decida o que acontece quando falta uma tradução — normalmente, recorra à língua predefinida em vez de mostrar um espaço em branco.

Emails e notificações

Guarde o idioma de cada utilizador e use-o também nos emails, nas notificações e nos PDF. É fácil traduzir a app e esquecer que o email de boas-vindas continua a chegar em inglês.

Prompts que funcionam

Adicione internacionalização com react-i18next. Mova cada texto visível para o utilizador para locales/en.json com chaves organizadas por espaços de nomes, use interpolação e regras de plural em vez de concatenar texto, e formate datas, números e preços com Intl usando o locale atual. Ainda não mude nenhuma redação.

Adicione francês e alemão. As páginas de marketing públicas recebem os prefixos de URL /fr/ e /de/, com o inglês na raiz, links hreflang em cada página (incluindo a autorreferência e x-default), e html lang definido em cada página. Adicione um seletor de idioma que mostre o nome nativo de cada língua. Nas páginas com sessão iniciada, guarde o idioma no perfil do utilizador.

Adicione árabe com suporte da direita para a esquerda: defina dir="rtl" para o árabe, substitua as margens e os paddings esquerda/direita por propriedades lógicas, espelhe os ícones direcionais e confirme que os formulários e as tabelas continuam a ler-se corretamente.

Passo a passo

1. Escolha a primeira língua extra com base na procura real — onde estão os seus visitantes ou clientes.
2. Internacionalize o código: mova os textos para ficheiros, acrescente plurais e formatação com Intl. Lance isto apenas com inglês e confirme que nada mudou.
3. Defina a estrutura de URLs das páginas públicas e acrescente hreflang.
4. Traduza: faça um rascunho com tradução automática ou por IA e depois reveja com um falante fluente. Dê contexto aos tradutores — uma palavra como «Book» é um substantivo num ecrã e um verbo noutro.
5. Traduza o conteúdo da base de dados e defina as alternativas.
6. Localize o resto: emails, mensagens de erro, páginas legais, imagens com texto.
7. Teste cada língua em largura de telemóvel e, se for relevante, da direita para a esquerda.
8. Crie um processo para que as novas funcionalidades cheguem com traduções, e não meses depois.

Erros comuns

• Concatenar frases ("Tem " + n + " mensagens"), o que parte noutras línguas.
• Texto fixo deixado nos componentes, em mensagens de erro e em textos de validação.
• Formatar datas e preços manualmente.
• Bandeiras para representar línguas, e redirecionamentos automáticos que prendem as pessoas na versão errada.
• Um único URL para todas as línguas nas páginas que quer indexadas.
• Faltar os links de retorno hreflang, pelo que a Google ignora as anotações.
• Traduzir a interface mas não o conteúdo, ou o contrário.
• Tradução automática não revista em páginas de preços, legais ou de pagamento.

Lista de verificação multilingue

• Nenhum texto visível para o utilizador escrito diretamente no código; plurais e marcadores usados
• Datas, números e moedas formatados com Intl
• Seletor de idioma com nomes nativos em todas as páginas; escolha memorizada
• URLs separados por língua para as 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 da base de dados traduzido, com alternativas sensatas
• Emails e notificações enviados no idioma do utilizador
• Texto para clientes revisto por um falante fluente

Várias línguas na Mythex

Na Mythex, acrescenta línguas pedindo-o no chat — não existe um painel de tradução separado — por isso os prompts acima funcionam tal como estão escritos. Faça primeiro o passo de internacionalização e verifique-o em Preview antes de acrescentar línguas; é uma refatorização grande, e um checkpoint no chat dá-lhe um ponto para voltar atrás se algo falhar (chat e checkpoints). Se quiser que a app traduza conteúdos automaticamente com uma IA ou uma API de tradução, isso usa a sua própria chave de API, guardada nas definições do projeto (variáveis de ambiente e segredos); como usar APIs de LLM explica os custos. Publique de novo quando as novas línguas estiverem prontas.

Perguntas