La mejor solución para la internacionalización (i18n) en aplicaciones React

Cómo funciona

Instala el paquete TacoTranslate a través de npm:

npm install tacotranslate

Cuando tengas el módulo instalado, necesitarás crear una cuenta de TacoTranslate, un proyecto de traducción y las claves API asociadas. Crea una cuenta aquí. Es gratis y no requiere que agregues una tarjeta de crédito.

Dentro de la interfaz de la aplicación TacoTranslate, crea un proyecto y navega a la pestaña de claves API. Crea una clave read y una clave read/write. Las guardaremos como variables de entorno. La clave read es lo que llamamos public y la clave read/write es secret. Por ejemplo, podrías agregarlas a un archivo .env en la raíz de tu proyecto.

También necesitarás agregar dos variables de entorno más: TACOTRANSLATE_DEFAULT_LOCALE y TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El código de zona regional predeterminado de respaldo. En este ejemplo, lo configuraremos como en para inglés.
• TACOTRANSLATE_ORIGIN: La “carpeta” donde se almacenarán tus cadenas, como la URL de tu sitio web. Lee más sobre orígenes aquí.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Asegúrate de no filtrar nunca la clave API secreta read/write en los entornos de producción del lado del cliente.

Configurando TacoTranslate

Inicializa TacoTranslate en tu aplicación React envolviendo tu aplicación en el proveedor de contexto de TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

¡Ahora puedes usar el componente Translate en cualquier lugar dentro de tu aplicación para mostrar texto traducido! Asegúrate de consultar nuestra documentación para más información y para guías de implementación específicas para tu configuración.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Beneficios de usar TacoTranslate

• Ahorro de tiempo: Automatiza el tedioso proceso de localización y recopilación de cadenas, ahorrándote un tiempo valioso.
• Rentable: Reduce la necesidad de traducciones manuales, disminuyendo tus costos de localización.
• Mayor precisión: Las traducciones impulsadas por IA garantizan resultados contextualmente precisos y de alta calidad.
• Solución escalable: Agrega fácilmente soporte para nuevos idiomas a medida que tu aplicación y base de clientes crecen.

¡Comienza hoy!

Tu aplicación React se traducirá automáticamente cuando agregues cualquier cadena a un componente Translate. Ten en cuenta que solo los entornos con permisos read/write en la clave API podrán crear nuevas cadenas para traducir.

Recomendamos tener un entorno de staging cerrado y seguro donde puedas probar tu aplicación en producción, agregando nuevas cadenas antes de lanzar. Esto impedirá que alguien robe tu clave API secreta y potencialmente sobrecargue tu proyecto de traducción agregando cadenas no autorizadas.

Asegúrate de revisar los ejemplos completos en nuestro perfil de GitHub. Si encuentras algún problema, no dudes en contactarnos, y estaremos más que felices de ayudarte.

TacoTranslate te permite localizar automáticamente tus aplicaciones React rápida y fácilmente a cualquier idioma y desde cualquier idioma. ¡Traduce gratis!