i18n no Next.js: como criar sites multilíngues

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?

i18n

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.

useRouter

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

O i18n é um acrônimo para internacionalização, vindo da palavra inglesa internationalization, onde se tomam a primeira e a última letra e o número de letras entre elas

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.