Documenti / Qwik

Internazionalizzazione Qwik, automatizzata

Internazionalizza un'app Qwik: i componenti utilizzano useTranslation() per leggere la lingua dall'URL tramite Qwik City, e ogni percorso ottiene una copia per lingua.

Come funziona

Il JSX all'interno di component$ riceve const { t } = useTranslation(). La lingua è il primo segmento dell'URL (il useLocation di Qwik City), e ogni percorso, inclusi quelli dinamici, ottiene una copia per lingua.

Una frase intorno a un link rimane un unico messaggio, resa da rich() con gli elementi originali.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/routes/index.tsx · prima

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 · dopo

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."
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta un modulo src/i18n generato se il progetto non lo ha ancora:

src/i18n.ts con useTranslation(), localizePath() e localizzazioni bundle
Una copia di ogni percorso sotto src/routes/<lang>/

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.