Se quiser ler esse artigo em Português clique aqui

Recentemente, comecei a aprender Astro para criar um projeto semelhante a um painel.

Eu realmente quero implementar a internacionalização (i18n) neste projeto – a ideia é que todos possam usá-la, independentemente do seu idioma.

Problema

O suporte i18n do Astro é muito bom. Funciona de forma semelhante ao Next.js ou qualquer outra estrutura com roteamento baseado na estrutura de arquivos/pastas.

Então, se quisermos ter uma página em inglês e a mesma página em português, podemos organizar nossos arquivos assim:

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

E cada página tem suas próprias strings i18n – legal!

Mas é aqui que começa o meu problema: não quero clonar todas as minhas páginas; Eu só quero alterar as strings nessas páginas.

Preciso de algo como /[any-language-flag]/all-my-routes.

Você pode perguntar: "Por que não usar algo como react-intl?" Minha resposta é que quero aproveitar totalmente o mecanismo do Astro, especialmente para SSG/SSR, e evitar quaisquer componentes do cliente. Geralmente, esses frameworks usam React Context, que só é renderizado no lado do cliente.

Tentando e falhando

Em primeiro lugar, li a receita do Astro sobre o i18n e verifiquei algumas bibliotecas da comunidade para resolver esse problema.

A primeira biblioteca que testei foi a astro-i18next e parecia exatamente o que eu precisava!

Com base em uma matriz no arquivo de configuração, astro-i18next gera minhas páginas i18n no momento da construção, então só preciso codificar uma vez e não preciso me preocupar com a clonagem de páginas.

O problema é que astro-i18next parece estar arquivado ou não ser mais mantido. Há muitos problemas e o último commit foi há mais de um ano.

Solução

Depois de experimentar outras bibliotecas (menção honrosa ao astro-i18n), encontrei o Paraglide, e foi uma virada de jogo para o meu projeto.

Escolhi o Paraglide porque:

• É seguro para o tipo, então posso usá-lo com TypeScript e me beneficiar do preenchimento automático.
• Ele converte strings i18n em funções, portanto, se uma chave de string mudar, minha compilação falhará, detectando erros antecipadamente.
• O uso de funções i18n permite melhor agitação da árvore, removendo funções não utilizadas.
• Há uma extensão do VS Code que aprimora a experiência de desenvolvimento.

Nota: você também pode usar o Paraglide em um projeto JS, e ele também suporta Next.js.

Após a instalação e configuração, usei minhas mensagens assim:

---
import * as m from "../paraglide/messages.js";
---

{m.hello({ name: "Alan" })}

No entanto, isso não resolveu meu problema de roteamento – eu ainda estava clonando minhas páginas para cada idioma que queria adicionar.

Para resolver isso, mudei meu projeto para usar rotas dinâmicas na rota raiz, então todas as minhas rotas agora começam com a flag de idioma.

Minha estrutura de pastas ficou assim:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

Após esta alteração, o Paraglide pode obter automaticamente o idioma do parâmetro de rota:

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

Agora, posso adicionar um novo idioma apenas definindo-o em astro.config.ts e traduzindo meu arquivo de string.

Mas ainda tenho mais dois problemas para resolver:

1. Quando o usuário acessa http://localhost:4321/ pela primeira vez sem um sinalizador de idioma.
2. Se o usuário alterar o idioma em uma rota específica, preciso mantê-lo na mesma rota (por exemplo, /en/create-account deve redirecionar para /pt-br/create-account ou /pt-br/criar -conta).

Middleware para redirecionamento de idioma

Para resolver o primeiro problema de redirecionamento de idioma, usei middlewares Astro.

Em src/middleware/index.ts, adicionei este código:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

Seletor de idioma com rota atual

Para manter o usuário na mesma rota quando ele troca de idioma, adicionei este componente:

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

• Ir para Português
• Go to English

Além disso, poderíamos traduzir essas mensagens também, usando o segundo parâmetro na função de mensagens do Paraglide:

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

Considerações

Não considero minha solução a melhor, principalmente porque ainda estou aprendendo Astro, então pode haver outras soluções. Se você souber de algum, comente e vou tentar :)

Obrigado por ler este artigo! Se você tiver alguma dúvida, comente, terei prazer em responder.