Rechercher

Rechercher dans Kavel...

Menu de documentation

Internationalisation

Localisation typée, basée sur l'URL, avec Paraglide, chaque message est une fonction, vérifiée à la compilation.

Ce que vous obtenez

  • Des catalogues de messages curés (anglais, néerlandais, allemand, français et espagnol) et vous choisissez lesquels inclure à la création
  • La locale de base servie sur des URL sans préfixe et les autres locales sous un préfixe /xx/ (/de/…), résolues avant le routage, pour que les fichiers de routes restent indépendants de la locale
  • Un composant LocaleSwitcher et un runtime de messages compilé et tree-shakeable

Choisir les langues

Lorsque vous sélectionnez le module i18n, la CLI demande quelles langues inclure, ou passez-les de façon non interactive. La première locale est la base (repli) ; seuls les catalogues choisis sont conservés.

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

Utiliser les messages

Les messages compilent en fonctions typées sur l'objet m. Référencez une clé inexistante et ça ne compile pas :

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

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

Astuce

Les clés de message sont générées sous forme de noms stables et pseudo-aléatoires (p. ex. silver_lamp_cord_meadow) plutôt que de décrire le texte. Les clés restent ainsi stables quand la formulation change, ce qui évite le bruit de fusion. Modifiez le texte dans les catalogues JSON, pas la clé.

Ajouter une locale

  1. Ajoutez la locale à project.inlang/settings.json et à la liste locales dans apps/web/src/lib/i18n.ts.
  2. Créez messages/<locale>.json avec les clés traduites.
  3. Recompilez le runtime.
bash
bun i18n:compile

Chemins traduits

La locale de base est servie sans préfixe (/pricing) ; les autres locales sous un préfixe /xx/. Chaque route conserve son chemin par défaut ; pour traduire le chemin par locale (afin que le néerlandais obtienne /nl/prijzen), ajoutez une entrée à routeLocalizations dans src/lib/i18n.ts :

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