Falando a mesma língua: internacionalização de aplicações JavaScript

Sua aplicação falará qualquer idioma do mundo

Imagine: você criou um serviço incrível, publicou na internet, e usuários da Alemanha, Japão ou Brasil fecham o site em 10 segundos. Por quê? Porque eles não entendem nada do que está escrito nos botões. Na era da globalização, a internacionalização JavaScript não é um luxo, mas uma necessidade básica. Se você quer que seu produto conquiste o mundo (ou pelo menos alguns países vizinhos), não pode prescindir do i18n JavaScript.

Neste artigo, vamos explorar como transformar uma aplicação comum em um poliglota multilíngue. Você conhecerá quais bibliotecas i18n existem, como organizar corretamente os arquivos de tradução e escreveremos código real para internacionalização. Vamos lá!

O que é internacionalização e por que ela é necessária?

O termo técnico i18n (onde 18 é o número de letras entre o primeiro "i" e o último "n") significa a preparação arquitetônica da aplicação para trabalhar com diferentes idiomas e culturas. Não se trata apenas de traduzir palavras — é a adaptação de formatos de data, números, moedas, direções de texto (da esquerda para a direita ou da direita para a esquerda) e até esquemas de cores.

Imagine a data "03/04/2025". Para um americano, é 3 de abril; para um europeu, 4 de março. E se sua aplicação mostrar o preço em dólares para um usuário no Japão? Catástrofe. A internacionalização de aplicações web resolve todos esses problemas a nível de código.

Por que começar agora?

\n
• Crescimento de audiência — 75% dos usuários preferem comprar no idioma nativo
\n
• Impulso SEO — mecanismos de busca classificam sites multilíngues mais alto nos resultados locais
\n
• Usabilidade — redução da taxa de rejeição e aumento do tempo no site
\n

Principais abordagens para i18n em JavaScript

Existem duas abordagens globais para localização JavaScript: solução própria e uso de bibliotecas prontas. Vamos analisar ambas, mas recomendo fortemente a segunda opção — menos bugs, mais funcionalidades.

Internacionalização própria: exemplo básico

Se sua aplicação é uma landing page simples de 10 linhas, você pode dispensar bibliotecas. Vamos criar um objeto com traduções:

const translations = {\n    pt: {\n        greeting: "Olá, mundo!",\n        button: "Clique em mim"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    }\n};

Agora a função para trocar o idioma:

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// Uso em HTML:\n// <h1 data-i18n="greeting">Olá, mundo!</h1>\n// <button data-i18n="button">Clique em mim</button>

Isso funciona, mas imagine que você tenha 500 linhas de texto, além de precisar lidar com pluralização (1 maçã, 2 maçãs, 5 maçãs) e interpolação (Olá, {username}). É aí que entram as bibliotecas de internacionalização.

Top bibliotecas i18n para JavaScript

O mercado de bibliotecas i18n é diversificado. Aqui estão três líderes que merecem sua atenção:

1. i18next — o rei entre as bibliotecas

i18next JavaScript é o padrão de facto. Funciona com React, Vue, Angular e JS puro. Suporta pluralização, interpolação, traduções aninhadas e carregamento de recursos sob demanda.

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b