Si vous souhaitez lire cet article en anglais, rendez-vous ici

J'ai récemment commencé à apprendre Astro pour créer un projet de style tableau de bord.

Je souhaite vraiment implémenter l'internationalisation (i18n) dans ce projet : le but est que tout le monde puisse l'utiliser, quelle que soit la langue.

Problème

Le support I18n sur Astro est très 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 : cool !

Mais c'est là que commence mon problème : je ne veux pas cloner toutes mes pages ; Je veux juste changer les chaînes sur 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 profiter pleinement du moteur Astro, en particulier pour SSG/SSR, et éviter tout composant côté client. Généralement, ces frameworks utilisent React Context, qui est rendu uniquement côté client.

Tentatives et échecs

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

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

Sur la base d'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 ne me soucie pas 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 pour 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 profiter 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.

La structure de mes dossiers ressemblait à ceci :

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

Après ce changement, Paraglide peut obtenir automatiquement la langue des paramètres d'itinéraire :

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

Maintenant, je peux ajouter une nouvelle langue simplement en la configurant 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 à http://localhost:4321/ pour la première fois sans indicateur de langue.
2. Si l'utilisateur change de 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- account ).

Middleware pour la redirection linguistique

Pour résoudre le problème de redirection de la première langue, j'ai utilisé le middleware 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) => {
  // 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();
});

Sélecteur de langue avec itinéraire actuel

Pour garder l'utilisateur sur le même itinéraire lors du changement 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 pouvons également traduire ces messages, en utilisant le deuxième paramètre de la fonction message de 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 peut y avoir d'autres solutions. Si vous en connaissez, commentez et j'essaierai :)

Merci d'avoir lu cet article ! Si vous avez des questions, commentez, je me ferai un plaisir d'y répondre.