Se quiser ler esse artigo em Portugês clique aqui

Vor kurzem habe ich angefangen, Astro beizubringen, ein Dashboard-ähnliches Projekt zu erstellen.

Ich möchte in diesem Projekt unbedingt die Internationalisierung (i18n) implementieren – die Idee ist, dass jeder sie nutzen kann, unabhängig von seiner Sprache.

Problem

Astros i18n-Unterstützung ist ziemlich gut. Es funktioniert ähnlich wie Next.js oder jedes andere Framework mit Routing basierend auf der Datei-/Ordnerstruktur.

Wenn wir also eine Seite auf Englisch und dieselbe Seite auf Portugiesisch haben möchten, können wir unsere Dateien wie folgt organisieren:

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

Und jede Seite hat ihre eigenen i18n-Strings – schön!

Aber hier beginnt mein Problem: Ich möchte nicht alle meine Seiten klonen; Ich möchte nur die Zeichenfolgen auf diesen Seiten ändern.

Ich brauche so etwas wie /[any-lingual-flag]/all-my-routes.

Sie fragen sich vielleicht: „Warum nicht so etwas wie „react-intl“ verwenden?“ Meine Antwort ist, dass ich die Engine von Astro voll ausnutzen möchte, insbesondere für SSG/SSR, und jegliche Client-Komponenten vermeiden möchte. Im Allgemeinen verwenden diese Frameworks React Context, der nur auf der Clientseite gerendert wird.

Versuchen und Scheitern

Zuerst habe ich das Astro-Rezept zu i18n gelesen und mir einige Community-Bibliotheken angesehen, um dieses Problem zu lösen.

Die erste Bibliothek, die ich getestet habe, war astro-i18next, und sie schien genau das zu sein, was ich brauchte!

Basierend auf einem Array in der Konfigurationsdatei generiert astro-i18next meine i18n-Seiten zur Erstellungszeit, sodass ich nur einmal programmieren muss und mir keine Gedanken über das Klonen von Seiten machen muss.

Das Problem ist, dass astro-i18next archiviert zu sein scheint oder nicht mehr gepflegt wird. Es gibt viele Probleme und der letzte Commit war vor über einem Jahr.

Lösung

Nachdem ich andere Bibliotheken ausprobiert hatte (lobende Erwähnung für astro-i18n), stieß ich auf Paraglide, und es war ein Wendepunkt für mein Projekt.

Ich habe mich für Paraglide entschieden, weil:

• Es ist typsicher, sodass ich es mit TypeScript verwenden und von der automatischen Vervollständigung profitieren kann.
• Es konvertiert i18n-Strings in Funktionen. Wenn sich also ein String-Schlüssel ändert, schlägt mein Build fehl und Fehler werden frühzeitig erkannt.
• Die Verwendung von i18n-Funktionen ermöglicht ein besseres Tree-Shaking und entfernt ungenutzte Funktionen.
• Es gibt eine VS Code-Erweiterung, die das Entwicklungserlebnis verbessert.

Hinweis: Sie können Paraglide auch in einem JS-Projekt verwenden und es unterstützt auch Next.js.

Nach der Installation und Konfiguration habe ich meine Nachrichten wie folgt verwendet:

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

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

Das hat mein Routing-Problem jedoch nicht gelöst – ich habe meine Seiten immer noch für jede Sprache geklont, die ich hinzufügen wollte.

Um dieses Problem zu lösen, habe ich mein Projekt geändert, um dynamische Routen in der Stammroute zu verwenden, sodass alle meine Routen jetzt mit der Sprachflagge beginnen.

Meine Ordnerstruktur sieht folgendermaßen aus:

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

Nach dieser Änderung kann Paraglide die Sprache automatisch aus dem Routenparameter abrufen:

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

Jetzt kann ich eine neue Sprache hinzufügen, indem ich sie einfach in astro.config.ts einstelle und meine String-Datei übersetze.

Aber ich habe noch zwei weitere Probleme zu lösen:

1. Wenn der Benutzer zum ersten Mal auf http://localhost:4321/ ohne Sprachkennzeichnung zugreift.
2. Wenn der Benutzer die Sprache auf einer bestimmten Route ändert, muss ich ihn auf derselben Route belassen (z. B. sollte /en/create-account zu /pt-br/create-account oder /pt-br/criar umleiten -conta).

Middleware für die Sprachumleitung

Um das erste Problem der Sprachumleitung zu lösen, habe ich Astro-Middlewares verwendet.

In src/middleware/index.ts habe ich diesen Code hinzugefügt:

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

Sprachauswahl mit aktueller Route

Um den Benutzer beim Wechseln der Sprache auf dem gleichen Weg zu halten, habe ich diese Komponente hinzugefügt:

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

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

• Ir para Português
• Go to English

Darüber hinaus könnten wir diese Nachrichten auch übersetzen, indem wir den zweiten Parameter in der Paraglide-Nachrichtenfunktion verwenden:

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

Überlegungen

Ich halte meine Lösung nicht für die beste, insbesondere da ich immer noch Astro lerne, daher könnte es andere Lösungen geben. Wenn Sie welche kennen, kommentieren Sie sie bitte und ich werde sie ausprobieren :)

Danke, dass Sie diesen Artikel gelesen haben! Wenn Sie Fragen haben, kommentieren Sie bitte, ich antworte gerne.