Internationalisierung

Typsichere, URL-basierte Lokalisierung mit Paraglide, jede Nachricht ist eine Funktion, zur Compile-Zeit geprüft.

Was du bekommst

Kuratierte Nachrichtenkataloge (Englisch, Niederländisch, Deutsch, Französisch und Spanisch) und du wählst beim Erstellen, welche du einschließt
Die Basis-Locale unter URLs ohne Präfix und andere Locales unter einem /xx/-Präfix (/de/…), vor dem Routing aufgelöst, sodass Routendateien locale-agnostisch bleiben
Eine LocaleSwitcher-Komponente und eine kompilierte, tree-shakebare Nachrichten-Runtime

Sprachen wählen

Wenn du das i18n-Modul auswählst, fragt die CLI, welche Sprachen du einschließen willst, oder gib sie nicht-interaktiv an. Die erste Locale ist die Basis (Fallback); nur die gewählten Kataloge bleiben erhalten.

bash

bun create kavel@latest my-app --locales en,de,fr

Nachrichten verwenden

Nachrichten kompilieren zu typisierten Funktionen am m-Objekt. Verweise auf einen nicht existierenden Schlüssel und es kompiliert nicht:

tsx

import { m } from "@/paraglide/messages";

export function Hero() {
  return <h1>{m.hero_title()}</h1>;
}

Tipp

Nachrichtenschlüssel werden als stabile, pseudo-zufällige Namen generiert (z. B. silver_lamp_cord_meadow), statt den Text zu beschreiben. So bleiben Schlüssel stabil, wenn sich der Wortlaut ändert, und Merge-Rauschen wird vermieden. Bearbeite den Text in den JSON-Katalogen, nicht den Schlüssel.

Eine Locale hinzufügen

Füge die Locale zu project.inlang/settings.json und zur locales-Liste in apps/web/src/lib/i18n.ts hinzu.
Erstelle messages/<locale>.json mit den übersetzten Schlüsseln.
Kompiliere die Runtime neu.

bash

bun i18n:compile

Übersetzte Pfadnamen

Die Basis-Locale wird ohne Präfix ausgeliefert (/pricing); andere Locales unter einem /xx/-Präfix. Jede Route behält standardmäßig ihren Pfad; um den Pfad pro Locale zu übersetzen (sodass Niederländisch /nl/prijzen erhält), füge einen Eintrag zu routeLocalizations in src/lib/i18n.ts hinzu:

export const routeLocalizations = {
  "/about": { en: "/about", nl: "/over-ons" },
};