React i18n, automatizado

Cómo funciona

localize.dev lee cada archivo .tsx y .jsx, encuentra el texto que la gente ve (texto, atributos como placeholder y aria-label, cadenas renderizadas desde ternarios) y lo reescribe en llamadas t() con claves nombradas según lo que hace el texto.

Los plurales se convierten en un solo mensaje con cada forma que cada idioma necesita, y las oraciones alrededor de los enlaces permanecen completas con <Trans>. Una oración con dos recuentos („3 archivos en 2 carpetas“) obtiene un plural por recuento, y los ordinales (ordinal(place) → „1st“, „2nd“) se convierten en plurales ordinales de i18next en las formas propias de cada idioma.

Las fechas, números y precios codificados para una sola configuración regional (toLocaleDateString('en-US'), ` $${price} `) se reescriben para que sigan también el idioma de la aplicación.

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.

export function Inbox({ user, count }) {
  return (
    <section>
      <h1>Welcome back, {user.name}</h1>
      <p>{count} {count === 1 ? 'message' : 'messages'} waiting</p>
      <input placeholder="Search messages" />
      <p>Read the <a href="/help">help center</a> first.</p>
    </section>
  );
}

import { useTranslation, Trans } from 'react-i18next';

export function Inbox({ user, count }) {
  const { t } = useTranslation();
  return (
    <section>
      <h1>{t('inbox.welcome_back', { name: user.name })}</h1>
      <p>{t('inbox.messages_waiting', { count })}</p>
      <input placeholder={t('inbox.search_messages')} />
      <p><Trans i18nKey="inbox.read_the_help_center_first" components={{ a: <a href="/help" /> }} /></p>
    </section>
  );
}

{
  "inbox": {
    "welcome_back": "Welcome back, {{name}}",
    "messages_waiting_one": "{{count}} message waiting",
    "messages_waiting_other": "{{count}} messages waiting",
    "search_messages": "Search messages",
    "read_the_help_center_first": "Read the <a>help center</a> first."
  }
}

Lo que añade la configuración

La primera ejecución configura react-i18next si el proyecto aún no lo tiene:

• i18next y react-i18next añadidos a package.json (la GitHub Action también actualiza el lockfile)
• src/i18n.ts, que carga cada archivo de idioma y elige el idioma de una selección guardada, luego el navegador
• Una importación del mismo en su archivo de entrada y un <LanguageSwitcher /> que puede colocar en su encabezado

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.