Intermediatei18n25 Min.18. Apr. 2026

i18n für statische Sites — 5 Locales

Slash-Route-Lokalisierung ohne CMS: Dictionaries, dynamische [locale]-Pfade, hreflang und fünf Sprachen synchron halten.

Die Architektur

/en/blog/hello    ← Default-Locale, trotzdem mit Prefix (sauberer als ein Sonderfall)
/ru/blog/hello
/zh/blog/hello
/ja/blog/hello
/de/blog/hello

Drei bewegliche Teile:

  1. Dictionaries — ein JSON pro Locale, identische Form, typisiert als Record<Locale, typeof en>, sodass TypeScript schreit, wenn ein Key abweicht.
  2. Dynamische Routen — src/pages/[locale]/... mit getStaticPaths(), das jede Locale zurückgibt.
  3. Content-Fallback — Posts einmal in en/ schreiben und unter jeder Locale rendern, bis Übersetzungen existieren.

Der Type-Trick, der dich rettet

export type Locale = "en" | "ru" | "zh" | "ja" | "de";
const dictionaries: Record<Locale, typeof en> = { en, ru, zh, ja, de };

typeof en ist das Schema. Füge einen Key zu en.json hinzu, und der Build schlägt fehl, bis die vier anderen Dictionaries nachziehen.

Vergiss den head nicht

<link rel="alternate" hreflang="..."> für jede Locale plus x-default, Canonical pro Seite und aus Astro.url abgeleitete Pfade. Suchmaschinen belohnen die langweilige Klempnerarbeit.

Tutorials