3 minutos de leitura
Autor(a)
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Nesse artigo vamos entender o que é o i18n e como implementar em aplicações NextJS.
Quando estamos construindo aplicações que terão uma audiência global, por exemplo disney+, netflix, twitter entre outras, o conteúdo é servido na linguagem nativa de quem está utilizando o serviço, é aí que entra o i18n.
Então como aplicamos o i18n no nosso projeto NextJS?
O NextJS suporta por padrão internacionalização de rotas, tudo que precisamos fazer é criar um arquivo chamado next.config.js e passar uma localidade padrão e uma lista com as localidades específicas que você quer exibir conteúdo e o roteamento vai ser feito automaticamente.
module.exports = {
i18n: {
locales: ['pt-BR','en-US'],
defaultLocale: 'pt-BR',
}
}
Com a localização configurada no nosso site, no nosso exemplo vamos criar um arquivo json, de onde vamos consumir o conteúdo:
export const enUS = {
saudacao: “welcome to my website”
}
export const ptBR= {
saudacao: “bem vinda ao meu site”
}
Agora precisamos de uma maneira de identificar a localização da pessoa que está utilizando nossa aplicação para exibir o conteúdo em pt-br ou em en-us.
Para fazer essa identificação da localização do conteúdo podemos usar o hook chamado useRouter, dentro do objeto router agora temos acesso a uma propriedade chamada locale que vai nos dizer em qual idioma estamos.
import { useRouter } from 'next/router'
// código omitido
const router = useRouter()
const { locale } = router
Se colocarmos o locale dentro do nosso componente:
// código omitido
return(
<div>
<p> { locale } </p>
</div>
)
Quando acessarmos nosso site vamos ver na tela um parágrafo escrito pt-BR, que a localização atual. Se colocarmos na url a rota /en-US, o locale agora vai exibir en-US.
Deixar para quem está navegando ter que trocar manualmente a rota para exibir conteúdo não faz muito sentido. Vamos automatizar essa tarefa usando o método push do router, passamos para esse método a rota “/” que é a página inicial e o objeto locale para indicar para qual língua queremos fazer a re-renderização da página
const handleToggle = () => {
switch(locale){
case “pt-BR”
router.push(“/”, “/”, {locale:”en-US” })
break
case “en-US”
router.push(“/”, “/”, {locale: “pt-BR”})
break
}
}
Agora falta exibir o conteúdo. Para isso, importamos o json com as traduções e fazemos uma verificação para exibir o conteúdo em português caso o locale seja pt-BR caso contrário exiba o conteúdo em inglês.
// código omitido
const traducao = locale == “pt-BR” ? ptBR : enUS
E no compoenente
// código omitido
return(
<div>
<h1> { traducao.saudacao } </h1>
<p onClick={handleToggle}> {locale} </p>
</div>
)
Ao renderizar a página veremos:
bem vinda ao meu site
pt-BR
Se clicarmos no parágrafo para fazer a troca da rota, veremos:
welcome to my website
en-US
Se gostou desse conteúdo e quer saber mais sobre, aqui na Alura temos uma Formação ReactJS onde vamos nos aprofundar ainda mais em todo o ecossistema do ReactJS.
Avalie este artigo
