How do I translate my React website?

Use an i18n library like react-i18next (replace text with t() keys and maintain a file per language), or add a translation script such as ConveyThis to index.html to translate the rendered app without code changes.

What is the best translation library for React?

react-i18next is the most widely used option and works with hooks via useTranslation. Other libraries exist, but the concepts (keys, locale files, interpolation, plurals) are the same.

Does ConveyThis work with React Router and dynamic content?

Yes. The script tracks client-side route changes and watches for newly rendered content, so new views and updated text are translated.

Is Google Translate a good way to translate a React site?

Browser translation helps individual visitors but creates no indexable pages and gives you no control over quality. Google's own website widget has been limited to non-commercial use since 2020.

How do I keep some React components untranslated?

With ConveyThis, add className="conveythis-no-translate" to the element. With react-i18next, don't pass that text through t().

Cómo traducir un sitio web React (i18next o No-Code)

Resume este post con: 7 min de lectura

ChatGPT

Perplejidad

Grok

Inteligencia artificial de Google

Puedes traducir un sitio web React de dos maneras. La ruta del código es una biblioteca i18n como react-i18next: reemplaza el texto codificado con claves, llama t('key') a través del useTranslation enganchar y mantener un archivo de traducción por idioma. La ruta sin código es una capa de traducción de sitios web: agrega un script a su archivo de entrada HTML y traduce la aplicación renderizada, incluidas las vistas que aparecen después de la navegación del lado del cliente. react-i18next se adapta a equipos donde los desarrolladores son dueños del texto y lo quieren en el código base. Una capa de traducción es más rápida cuando necesitas todo el sitio en muchos idiomas, incluido el contenido de un CMS o API.

Conclusiones clave

react-i18next (compilado en i18next) es la configuración más común de React i18n: npm install react-i18next i18next, inicializar con initReactI18next, entonces usa const { t } = useTranslation().
Una biblioteca i18n traduce tus cadenas. Aún necesitas traductores, URL de idiomas, hreflang y un plan para contenido CMS o API.
ConveyThis no necesita cambios de código: pegue el fragmento en index.html, seleccione idiomas y edite traducciones en un editor visual. Sigue la navegación de React Router y traduce el contenido recién renderizado.
La representación exclusiva del lado del cliente limita el SEO multilingüe con cualquier método. Utilice la representación del servidor (por ejemplo, Next.js) o la representación previa si el tráfico de búsqueda en otros idiomas es importante.

Opción 1: Traducir una aplicación React con react-i18next

El Guía de inicio de React-I18Next muestra la configuración mínima.

1. Instalar

npm install react-i18next i18next --save

2. Configurar i18next

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3. Impórtalo una vez en el punto de entrada

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

4. Utilice el gancho en los componentes

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

Como dice la guía, “Obtendrás la función t usando el gancho useTranslation” Para aplicaciones más grandes, divida las traducciones en espacios de nombres y cárguelas a pedido (por ejemplo, con un complemento de backend) en lugar de agrupar todos los idiomas.

Lo que te deja una biblioteca i18n

Alguien tiene que escribir todas las claves en todos los idiomas y actualizarlas cada vez que cambia la copia en inglés. Las claves faltantes vuelven silenciosamente al idioma predeterminado.
Las descripciones de productos, las publicaciones de blogs y el contenido de CMS no están en su código, por lo que necesitan su propio proceso de localización.
Construyes las URL del idioma. Pon el idioma en la ruta (/de/pricing) con React Router o el enrutamiento de su marco y manténgalo sincronizado con i18n.language. Google recomienda URL separadas por idioma en lugar de cambiarlas por cookie o configuración del navegador (Centro de búsqueda de Google).
También manejas hreflang y <html lang>. Cada versión de idioma debe enumerarse a sí misma y a todas las demás, o Google ignora las etiquetas (Centro de búsqueda de Google). Actualizar document.documentElement.lang sobre el cambio de idioma.
Precios y fechas necesarias Intl.NumberFormat y Intl.DateTimeFormat (o el formato de i18next).

Mejores prácticas de React i18n

Utilice claves descriptivas (checkout.pay) en lugar de oraciones completas en inglés como claves.
Nunca construya oraciones concatenando fragmentos traducidos; utilice la interpolación para que los traductores puedan reordenar las palabras.
Utilice el manejo plural de i18next; muchos idiomas tienen más de dos formas plurales.
No pongas texto en imágenes o SVG que no puedas traducir.
Diseñe cuerdas más largas y pruebe diseños de derecha a izquierda con anticipación si necesita árabe o hebreo.
Agregue una verificación de CI que falla cuando una clave existe en inglés pero no en otras localidades.

Opción 2: Traducir un sitio React sin código, con ConveyThis

Si prefiere no refactorizar todos los componentes, o gran parte de su contenido proviene de un CMS o API, ConveyThis puede traducir la aplicación React a medida que se renderiza.

La configuración consta de cinco pasos:

Crea una cuenta ConveyThis y agrega tu dominio.
Seleccione el idioma de origen y los idiomas de destino (se admiten 210) y luego guarde.
Copie el fragmento JavaScript de su panel. El Guía de instalación de React camina por cada pantalla.
Péguelo en su archivo de entrada HTML antes de cerrarlo </head> o </body> etiqueta: public/index.html en Crear proyectos de aplicaciones React, o index.html en la raíz del proyecto en proyectos Vite.
Implementar. Aparece un selector de idioma y el sitio se traduce automáticamente.

En una aplicación de una sola página, el script observa la página en busca de contenido agregado o modificado después de la carga y sigue los cambios de ruta del lado del cliente (navegación de API de historial y cambios de hash). Cuando React Router representa una nueva vista o las actualizaciones de estado agregan texto nuevo, ConveyThis lo traduce. Tus componentes no necesitan llamar a nada.

Mantienes el control de la salida:

Edite cualquier oración en contexto con el editor visual.
Establezca reglas de glosario para nombres de productos y términos fijos (planes pagos) y reutilice traducciones aprobadas con memoria de traducción.
Excluir elementos con el conveythis-no-translate clase, por ejemplo nombres de usuario, ejemplos de código o precios que usted mismo formatea (cómo excluir segmentos).
Invita a revisores para cada idioma con roles de equipo.

En JSX, la exclusión se ve así:

<span className="conveythis-no-translate">{user.displayName}</span>

SEO para sitios React

Una aplicación React renderizada por el cliente envía un shell HTML casi vacío y crea la página en el navegador. Cualquiera que sea el método de traducción que utilices, ese es el principal obstáculo para el SEO multilingüe.

Si el tráfico orgánico en otros lenguajes es importante, represente el contenido en el servidor o en el momento de la compilación (Next.js o un paso de renderizado previo).
Proporcione a cada idioma su propia URL. ConveyThis admite subcarpetas, subdominios o a ?lang parámetro, agrega etiquetas hreflang automáticamente y traduce títulos, meta descripciones y JSON-LD. Ver SEO multilingüe.
Verifique lo que ve Google con la inspección de URL de Search Console en una URL traducida.

react-i18next frente a una capa de traducción

	reaccionar-i18siguiente	ConveyThis
Cambios de código	Cada cadena reemplazada por `t()` llaves	Una etiqueta de script
Quién traduce	Tu equipo o traductores, en archivos JSON	Primer borrador de traducción automática, editado visualmente
Contenido de CMS / API	Proceso separado	Traducido con la página
Nuevo contenido	Agregue claves a cada configuración regional	Detectado y traducido automáticamente
URL y hreflang	Tú los construyes	Construido en
Mejor para	Interfaz de usuario de la aplicación propiedad de los desarrolladores	Sitios con mucho contenido, páginas de marketing, muchos idiomas

Muchos equipos utilizan ambos: react-i18next para la interfaz de usuario del producto conectado y una capa de traducción para el sitio de marketing, los documentos y el contenido de CMS.

Para obtener información general sobre los conceptos, consulte nuestro Guía de internacionalización (i18n). Si también trabajas en Vue, lee Cómo traducir un sitio web Vue.js. Si su aplicación es Angular, hay una separada Angular integración.

Preguntas frecuentes

¿Cómo traduzco mi sitio web React?

Utilice una biblioteca i18n como react-i18next (reemplace el texto con t() claves y mantener un archivo por idioma), o agregar un script de traducción como ConveyThis a index.html para traducir la aplicación renderizada sin cambios de código.

¿Cuál es la mejor biblioteca de traducción para React?

react-i18next es la opción más utilizada y funciona con ganchos vía useTranslation. Existen otras bibliotecas, pero los conceptos (claves, archivos locales, interpolación, plurales) son los mismos.

¿ConveyThis funciona con React Router y contenido dinámico?

Sí. El script rastrea los cambios de ruta del lado del cliente y observa el contenido recién renderizado, de modo que se traduzcan nuevas vistas y texto actualizado.

¿Es Google Translate una buena forma de traducir un sitio React?

La traducción del navegador ayuda a los visitantes individuales, pero no crea páginas indexables y no le brinda control sobre la calidad. El widget del sitio web propio de Google se ha limitado a un uso no comercial desde 2020.

¿Cómo puedo mantener algunos componentes de React sin traducir?

Con ConveyThis, agregar className="conveythis-no-translate" al elemento. Con react-i18next, no pases ese texto t().

Para probarlo en tu aplicación React, crear una cuenta ConveyThis y pega el fragmento en tu index.html.