Se quiser ler esse artigo em Portugês clique ici

Récemment, j'ai commencé à apprendre Astro pour créer un projet de type tableau de bord.

Je souhaite vraiment implémenter l'internationalisation (i18n) dans ce projet : l'idée est que tout le monde devrait pouvoir l'utiliser, quelle que soit sa langue.

Problème

Le support i18n d'Astro est assez bon. Il fonctionne de manière similaire à Next.js ou à tout autre framework avec un routage basé sur la structure de fichiers/dossiers.

Donc, si nous voulons avoir une page en anglais et la même page en portugais, nous pouvons organiser nos fichiers comme ceci :

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

Et chaque page a ses propres chaînes i18n : c'est sympa !

Mais voici où commence mon problème : je ne veux pas cloner toutes mes pages ; Je souhaite uniquement modifier les chaînes de ces pages.

J'ai besoin de quelque chose comme /[any-lingual-flag]/all-my-routes.

Vous pourriez demander : « Pourquoi ne pas utiliser quelque chose comme React-intl ? » Ma réponse est que je souhaite exploiter pleinement le moteur d'Astro, en particulier pour SSG/SSR, et éviter tout composant client. Généralement, ces frameworks utilisent React Context, qui n'est rendu que côté client.

Essayer et échouer

Tout d'abord, j'ai lu la recette Astro sur i18n et consulté certaines bibliothèques communautaires pour résoudre ce problème.

La première bibliothèque que j'ai testée était astro-i18next, et elle ressemblait exactement à ce dont j'avais besoin !

Basé sur un tableau dans le fichier de configuration, astro-i18next génère mes pages i18n au moment de la construction, je n'ai donc besoin de coder qu'une seule fois et je n'ai pas à me soucier du clonage des pages.

Le problème est qu'astro-i18next semble être archivé ou n'est plus maintenu. Il y a beaucoup de problèmes et le dernier commit remonte à plus d'un an.

Solution

Après avoir essayé d'autres librairies (mention honorable à astro-i18n), j'ai découvert Paraglide, et cela a changé la donne pour mon projet.

J'ai choisi Paraglide parce que :

• Il est sécurisé, je peux donc l'utiliser avec TypeScript et bénéficier de la saisie semi-automatique.
• Il convertit les chaînes i18n en fonctions, donc si une clé de chaîne change, ma construction échouera, détectant les erreurs plus tôt.
• L'utilisation des fonctions i18n permet de mieux secouer les arbres, en supprimant les fonctions inutilisées.
• Il existe une extension VS Code qui améliore l'expérience de développement.

Remarque : vous pouvez également utiliser Paraglide dans un projet JS, et il prend également en charge Next.js.

Après l'installation et la configuration, j'ai utilisé mes messages comme ceci :

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

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

Cependant, cela n'a pas résolu mon problème de routage : je clonais toujours mes pages pour chaque langue que je voulais ajouter.

Pour résoudre ce problème, j'ai modifié mon projet pour utiliser des routes dynamiques dans la route racine, donc toutes mes routes commencent désormais par l'indicateur de langue.

Ma structure de dossiers s'est transformée en ceci :

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

Après ce changement, Paraglide peut récupérer automatiquement la langue à partir du paramètre d'itinéraire :

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

Maintenant, je peux ajouter une nouvelle langue simplement en la définissant dans astro.config.ts et en traduisant mon fichier de chaîne.

Mais j'ai encore deux problèmes à résoudre :

1. Lorsque l'utilisateur accède pour la première fois à http://localhost:4321/ sans indicateur de langue.
2. Si l'utilisateur change la langue sur un itinéraire spécifique, je dois le conserver sur le même itinéraire (par exemple, /en/create-account doit rediriger vers /pt-br/create-account ou /pt-br/criar -conta).

Middleware pour la redirection linguistique

Pour résoudre le premier problème de redirection de langue, j'ai utilisé les middlewares Astro.

Dans src/middleware/index.ts, j'ai ajouté ce code :

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();
});

Sélecteur de langue avec itinéraire actuel

Pour garder l'utilisateur sur le même itinéraire lorsqu'il change de langue, j'ai ajouté ce composant :

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

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

• Ir para Português
• Go to English

De plus, nous pourrions également traduire ces messages, en utilisant le deuxième paramètre de la fonction Messages Paraglide :

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

Considérations

Je ne considère pas ma solution comme la meilleure, d'autant plus que j'apprends encore Astro, donc il pourrait y avoir d'autres solutions. Si vous en connaissez, n'hésitez pas à commenter et je vais les essayer :)

Merci d'avoir lu cet article ! Si vous avez des questions, n'hésitez pas à commenter, je serai heureux d'y répondre.