La millor solució per a la internacionalització (i18n) en aplicacions React

Com funciona

Instal·la el paquet TacoTranslate mitjançant npm:

npm install tacotranslate

Un cop tinguis el mòdul instal·lat, hauràs de crear un compte a TacoTranslate, un projecte de traducció i les claus d'API associades. Crea un compte aquí. És gratuït i no cal que afegeixis una targeta de crèdit.

A la interfície d'usuari de l'aplicació TacoTranslate, crea un projecte i ves a la pestanya de claus d'API. Crea una clau read i una altra read/write. Les guardarem com a variables d'entorn. La clau read és la que anomenem public i la clau read/write és secret. Per exemple, pots afegir-les a un fitxer .env a l'arrel del teu projecte.

També hauràs d'afegir dues variables d'entorn més: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El codi de localització de reserva per defecte. En aquest exemple, el configurarem a en per a l'anglès.
• TACOTRANSLATE_ORIGIN: La “carpeta” on s'emmagatzemaran les teves cadenes, com, per exemple, la URL del teu lloc web. Llegiu-ne més sobre els orígens aquí.

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

Assegura't de no filtrar mai la clau d'API secreta read/write als entorns de producció del costat del client.

Configuració de TacoTranslate

Inicialitzeu TacoTranslate a la vostra aplicació React envoltant-la amb el proveïdor de context 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>
	);
}

Ara pots utilitzar el component Translate a qualsevol lloc de la teva aplicació per mostrar text traduït! Assegura't de consultar la nostra documentació per a més informació i per a guies d'implementació específiques per a la teva configuració.

import {Translate} from 'tacotranslate/react';

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

Avantatges d'utilitzar TacoTranslate

• Estalvi de temps: Automatitza el tediós procés de localització i la recopilació de cadenes, estalviant-te temps valuós.
• Econòmic: Disminueix la necessitat de traduccions manuals, reduint els costos de localització.
• Precisió millorada: Les traduccions impulsades per IA asseguren resultats precisos en el seu context i d'alta qualitat.
• Solució escalable: Afegeix fàcilment suport per a nous idiomes a mesura que la teva aplicació i la base de clients creixen.

Comença avui!

La teva aplicació React es traduirà automàticament quan afegeixis qualsevol cadena a un Translate component. Tingues en compte que només els entorns amb permisos read/write sobre la clau de l'API podran crear noves cadenes per traduir.

Recomanem disposar d'un entorn de preproducció tancat i segur on puguis provar la teva aplicació de producció i afegir-hi noves cadenes abans de fer-la pública. Això evitarà que algú robi la teva clau secreta de l'API i que, potencialment, el teu projecte de traducció s'infli amb cadenes no desitjades.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!