Si quieres leer este artículo en inglés entra aquí

Recientemente comencé a aprender Astro para crear un proyecto estilo tablero.

Realmente quiero implementar la internacionalización (i18n) en este proyecto; el objetivo es que cualquiera pueda usarlo, independientemente del idioma.

Problema

El soporte de I18n en Astro es muy bueno. Funciona de manera similar a Next.js o cualquier otro marco con enrutamiento basado en la estructura de archivos/carpetas.

Entonces, si queremos tener una página en inglés y la misma página en portugués, podemos organizar nuestros archivos de esta manera:

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

Y cada página tiene sus propias cadenas i18n: ¡genial!

Pero aquí es donde comienza mi problema: no quiero clonar todas mis páginas; Solo quiero cambiar las cadenas de esas páginas.

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

Podrías preguntar: "¿Por qué no usar algo como reaccionar-intl?" Mi respuesta es que quiero aprovechar al máximo el motor Astro, especialmente para SSG/SSR, y evitar cualquier componente del lado del cliente. Generalmente, estos marcos utilizan React Context, que se representa solo en el lado del cliente.

Intentos y fracasos

En primer lugar, leí la receta de Astro sobre i18n y revisé algunas bibliotecas comunitarias para resolver este problema.

La primera biblioteca que probé fue astro-i18next, ¡y parecía exactamente lo que necesitaba!

Basado en una matriz en el archivo de configuración, astro-i18next genera mis páginas i18n en el momento de la compilación, por lo que solo necesito codificar una vez y no preocuparme por clonar páginas.

El problema es que astro-i18next parece estar archivado o ya no se mantiene. Hay muchos problemas y la última confirmación fue hace más de un año.

Solución

Después de probar otras bibliotecas (mención de honor para astro-i18n), encontré Paraglide y cambió las reglas del juego para mi proyecto.

Elegí Parapente porque:

• Es seguro para escribir, por lo que puedo usarlo con TypeScript y aprovechar la función de autocompletar.
• Convierte cadenas i18n en funciones, por lo que si la clave de una cadena cambia, mi compilación fallará y detectará errores temprano.
• El uso de las funciones de i18n permite agitar mejor los árboles, eliminando funciones no utilizadas.
• Existe una extensión de VS Code que mejora la experiencia de desarrollo.

Nota: También puedes usar Paraglide en un proyecto JS y también es compatible con Next.js.

Después de la instalación y configuración, usé mis mensajes como este:

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

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

Sin embargo, esto no resolvió mi problema de enrutamiento; todavía estaba clonando mis páginas para cada idioma que quería agregar.

Para resolver esto, cambié mi proyecto para usar rutas dinámicas en la ruta raíz, por lo que todas mis rutas ahora comienzan con la bandera de idioma.

Mi estructura de carpetas se veía así:

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

Después de este cambio, Paraglide puede obtener automáticamente el idioma de los parámetros de ruta:

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

Ahora puedo agregar un nuevo idioma simplemente configurándolo en astro.config.ts y traduciendo mi archivo de cadena.

Pero todavía tengo dos problemas que resolver:

1. Cuando el usuario accede a http://localhost:4321/ por primera vez sin una marca de idioma.
2. Si el usuario cambia de idioma en una ruta específica, necesito mantenerlo en la misma ruta (por ejemplo, /es/create-account debe redirigir a /pt-br/create-account o /pt-br/criar-account ).

Middleware para la redirección del idioma

Para resolver el problema de redirección del primer idioma, utilicé el middleware Astro.

En src/middleware/index.ts, agregué este código:

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

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

Selector de idioma con ruta actual

Para mantener al usuario en la misma ruta al cambiar de idioma, agregué este componente:

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

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

• Ir para Português
• Go to English

Además, también podemos traducir estos mensajes, usando el segundo parámetro en la función de mensajes de Paraglide:

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

Consideraciones

No considero que mi solución sea la mejor, especialmente porque todavía estoy aprendiendo Astro, por lo que puede haber otras soluciones. Si conoces alguno, por favor comenta y lo intentaré :)

¡Gracias por leer este artículo! Si tienes alguna duda, comenta, estaré encantado de responderte.