Esse é o segundo post de uma série chamada Dicas de React que eu venho fazendo, se você não viu o primeiro da uma olhada aqui e para ver tudo confere a listinha no meu site pessoal :)
Esses dias estava fazendo uns testes com React em um freela que me apareceu pedindo um site multi linguagem (português e inglês pra ser mais específico). De início lembrei da época que trabalhava com o WPML para traduzir os projetos no WordPress e tentei replicar a ideia do que ele fazia lá e consegui um resultado bem satisfatório que gostaria de compartilhar com vocês :)
Site alternando entre português e inglês
Quando falamos de internacionalização (i18n é uma abreviação para "Internationalization" entre I e o N existem 18 letras) existem diversos tópicos para abordarmos como:
Entre alguns outros sub-tópicos, nesse post vamos focar em dois pontos.
1. Traduzir os textos de uma forma escalável
2. como resgatar o parâmetro via URL informando qual linguagem o usuário deseja visualizar.
Para não perdemos tempo configurando coisas, eu deixei tudo pré-pronto esse repositório
Nele já temos uma app react com um sistema de roteamento configurado, e também o código dessa parte da explicação que irei comentar agora.
O foco para começarmos a entender o projeto atual está no conteúdo do arquivo ./src/routes.js
Estrutura do projeto
Dentro do arquivo ./src/routes.js eu deixei declaradas algumas rotas da nossa aplicação simulando um blog:
export const Routes = () => {
return (
<Switch>
<MultiLanguageRoute exact path="/"/>
<MultiLanguageRoute exact path="/:lang" component={Home}/>
<MultiLanguageRoute exact path="/:lang/posts" component={Posts}/>
<MultiLanguageRoute exact path="/:lang/posts/:id" component={Post}/>
<MultiLanguageRoute path="*" component={Page404}/>
</Switch>
)
}Ao invés de chamar diretamente o componente <Route> do React Router eu criei esse componente <MultiLanguageRoute /> como um middleware para gerenciar alguns problemas de fazer a i18n que peguei como:
const MultiLanguageRoute = (props) => {
const defaultLanguage = LANGUAGES.default
const hasLang = props.computedMatch.params.lang
const is404Page = props.path
const isBasePathWithoutLang = props.path === "/"
if(isBasePathWithoutLang) return <Redirect to={`/${defaultLanguage}`} />
if(!hasLang >
return <Route {...props} />
}Conversei bastante com o Felipe Souto, e no meio da conversa a gente chegou no ponto que é ultra importante ressaltar que poderíamos pegar o atributo do idioma de várias formas diferentes.
Mais abaixo no post eu cito outras formas de pegar o atributo
Importante: Sempre que possível, planeje a internacionalização de um site desde o começo do projeto migrar essas coisas em um projeto que está rodando pode ser extremamente trabalhoso.
Um último arquivo que falta mostrar é o que vem por meio do import { LANGUAGES } from './_i18n/languages' que basicamente é um objeto com os idiomas que possuimos e um atributo com a linguagem default (para podermos acessar em diferentes locais do código)
export const LANGUAGES = {
pt: {
urlLang: 'pt',
code: 'pt-BR'
},
en: {
urlLang: 'en',
code: 'en-US'
},
default: 'pt'
}Agora que vimos uma forma de resolver o lance do parâmetro do idioma, vamos ver como traduzir os textos da nossa app.
Componente da home do nosso projeto
A meta agora é fazer com que sempre que um conteúdo seja escrito em português que é nosso idioma padrão, tenhamos uma tradução para ele em inglês e vice-versa de acordo com o parâmetro do idioma passado na URL.
Eu pensei em diversas formas de criar minhas próprias soluções para isso, reinventar a roda pode ti ajudar bastante a resolver problemas no seu dia-a-dia e é bem divertido, mas reconheço que usar algo pronto por quem já passou por mais problemas seria uma escolha bem melhor principalmente para algo que vai pra produção, por isso agora vamos utilizar a biblioteca react-intl do Yahoo.
Ela nos permite usar um componente chamado
Mas após chamar o componente e passar esse atributo id (que vou entrar em detalhes em breve) recebemos o seguinte erro:
Para usarmos de verdade a lib, precisamos fazer algumas configurações ainda:
O react-intl precisa que nós façamos a sua configuração passando um JSON com as mensagens que irão aparecer de acordo com o idioma.
Essa configuração é feita por meio de um provider para o react-intl que iremos ajustar e chama-lo em ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { Routes } from './routes';
import * as serviceWorker from './serviceWorker';
import IntlProviderConfigured from './_i18n/IntlProviderConfigured';
ReactDOM.render(
<IntlProviderConfigured>
<BrowserRouter>
<Routes />
</BrowserRouter>
</IntlProviderConfigured>
, document.getElementById('root'));O código por trás do <IntlProviderConfigured> é o seguinte:
import React from 'react';
import { addLocaleData, IntlProvider } from 'react-intl'
import pt from 'react-intl/locale-data/pt'
import translations from './translations.json'
import { LANGUAGES } from './languages.js';
// Setup dados de localização por idioma
addLocaleData([...pt])
export default class IntlProviderConfigured extends React.Component {
state = {
loading: true,
locale: ''
}
componentDidMount() {
const currentUrlLang = window.location.pathname.split('/')[1]
const currentLanguage = LANGUAGES[currentUrlLang]
if(!currentLanguage) return window.location.href = `/${LANGUAGES.default}`
this.setState({ locale: currentLanguage.code, loading: false })
}
render() {
const locale = this.state.locale
const { children } = this.props
if(this.state.loading) return <div>...</div>
return (
<IntlProvider locale={locale} messages={translations[locale]}>
{children}
</IntlProvider>
)
}
}{
"en-US": {
"Bem vindo!": "Welcome!",
"header.bemvindousuario": "Welcome {usuario}"
},
"pt-BR": {
"Bem vindo!": "Bem vindo!",
"header.bemvindousuario": "Bem vindo {usuario}!"
}
}<FormattedMessage
id="header.bemvindousuario"
values={{usuario: <b>{'Mario'}</b>}}
/>Agora ao abrirmos nosso projeto no navegador conseguimos alterar o idioma e ver tudo funcionando tranquilamente
Troca de idiomas funcionando após a configuração que fizemos
Para gerar o JSON com as traduções eu acho meio ruim ficar escrevendo na mão, para facilitar a vida eu criei um gerador que você pode usar agora em seus projetos através desse pacote do npm
Não existe uma solução bala de prata, no post eu apenas cito uma forma, existem diversas alternativas como:
Seja qual for a opção que você vá escolher, analise qual o melhor para o seu projeto e defina uma estratégia em cima.
Para pegar os dados dinâmicos no backend, primeiro a API que você está se comunicando precisa ter suporte para diferentes retornos baseados em um idioma solicitado, caso suporte vc pode usar o header: Accept-Language
Minha sugestão é você criar um BFF (Back end For Front end), ele servirá como um meio de campo ente você e as API externas que você se comunica e via ele você pode configurar as traduções.
Para isso você vai precisar mexer no `IntlProviderConfigured.js` e fazer um request que irá ti retornar as traduções. Um código com um exemplo melhor disso existe na documentação do react-intl
Trabalhar com SPAs i18n exige um certo esforço, e espero ter conseguido dar um norte para você conseguir resolver os problemas em seus projetos atuais/futuros.
Espero que tenha gostado do artigo, em breve trarei mais dicas, se curtiu e quiser saber em primeira mão quando vierem novos conteúdos, me segue no meu twittere pra acompanhar meus outros posts tá tudo centralizado em meu site pessoal https://mariosouto.com até mais \o