Docs / Qwik

Qwik i18n, automatisé

Localisez une application Qwik : les composants utilisent useTranslation() pour lire la langue depuis l'URL avec Qwik City, et chaque route reçoit une copie par langue.

Comment ça marche

JSX dans component$ utilise const { t } = useTranslation(). La langue est le premier segment de l’URL (Qwik City’s useLocation), et chaque route, y compris les dynamiques, reçoit une copie par langue.

Une phrase autour d’un lien reste un message, rendu par rich() avec les éléments originaux.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

src/routes/index.tsx · avant

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <h1>Welcome to the shop</h1>
      <p>Read the <a href="/faq">FAQ</a> before ordering.</p>
    </>
  );
});

src/routes/index.tsx · après

import { component$ } from '@builder.io/qwik';
import { useTranslation, rich } from '../i18n';

export default component$(() => {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t('home.welcome_to_the_shop')}</h1>
      <p>{rich(t('home.read_the_faq_before_ordering'), { a: (c) => <a href="/faq">{c}</a> })}</p>
    </>
  );
});

locales/en.json

{
  "home": {
    "welcome_to_the_shop": "Welcome to the shop",
    "read_the_faq_before_ordering": "Read the <a>FAQ</a> before ordering."
  }
}

Ce que l'installation ajoute

La première exécution configure un module src/i18n généré si le projet ne l'a pas encore :

src/i18n.ts avec useTranslation(), localizePath() et locales regroupés
Une copie de chaque route sous src/routes/<lang>/

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.