Documentación / Qwik

Qwik i18n, automatizado

Localiza una app Qwik: los componentes usan useTranslation() leyendo el idioma desde la URL con Qwik City, y cada ruta obtiene una copia por idioma.

Cómo funciona

El JSX dentro de component$ obtiene const { t } = useTranslation(). El idioma es el primer segmento de la URL (Qwik City’s useLocation), y cada ruta, incluyendo las dinámicas, recibe una copia por idioma.

Una oración alrededor de un enlace permanece como un mensaje, renderizado por rich() con los elementos originales.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

src/routes/index.tsx · antes

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 · despué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."
  }
}

Lo que añade la configuración

La primera ejecución configura un módulo src/i18n generado si el proyecto aún no lo tiene:

src/i18n.ts con useTranslation(), localizePath() y locales empaquetados
Una copia de cada ruta en src/routes/<lang>/

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.