La migliore soluzione per l'internazionalizzazione (i18n) nelle applicazioni React

Stai cercando di espandere la tua applicazione React in nuovi mercati? TacoTranslate rende incredibilmente facile localizzare le tue app React, permettendoti di raggiungere un pubblico globale senza problemi.

Perché scegliere TacoTranslate per React?

Integrazione senza soluzione di continuità: Progettato specificamente per applicazioni React, TacoTranslate si integra senza sforzo nel tuo flusso di lavoro esistente.
Raccolta automatica delle stringhe: Non è più necessario gestire manualmente i file JSON. TacoTranslate raccoglie automaticamente le stringhe dal tuo codice.
Traduzioni potenziate dall’IA: Sfrutta la potenza dell’IA per fornire traduzioni contestualmente accurate che si adattano al tono della tua applicazione.
Supporto linguistico istantaneo: Aggiungi il supporto per nuove lingue con un solo clic, rendendo la tua applicazione accessibile a livello mondiale.

Come funziona

Installa il pacchetto TacoTranslate tramite npm:

npm install tacotranslate

Quando hai installato il modulo, dovrai creare un account TacoTranslate, un progetto di traduzione e le chiavi API associate. Crea un account qui. È gratuito e non richiede l'aggiunta di una carta di credito.

All'interno dell'interfaccia utente dell'applicazione TacoTranslate, crea un progetto e vai alla scheda delle chiavi API. Crea una chiave read e una chiave read/write. Le salveremo come variabili d'ambiente. La chiave read è quella che chiamiamo public e la chiave read/write è secret. Per esempio, potresti aggiungerle a un file .env nella radice del tuo progetto.

Dovrai anche aggiungere altre due variabili d'ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: Il codice della localizzazione predefinita di riserva. In questo esempio, lo imposteremo su en per l’inglese.
TACOTRANSLATE_ORIGIN: La “cartella” in cui saranno memorizzate le tue stringhe, come l’URL del tuo sito web. Leggi di più sulle origini qui.

.env

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

Assicurati di non divulgare mai la chiave API segreta read/write negli ambienti di produzione lato client.

Configurazione di TacoTranslate

Inizializza TacoTranslate nella tua applicazione React avvolgendo la tua applicazione nel provider di contesto 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>
	);
}

Ora puoi utilizzare il componente Translate ovunque nella tua applicazione per visualizzare il testo tradotto! Assicurati di consultare la nostra documentazione per maggiori informazioni e per le guide all'implementazione specifiche per la tua configurazione.

import {Translate} from 'tacotranslate/react';

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

Vantaggi dell'utilizzo di TacoTranslate

Risparmio di tempo: Automatizza il noioso processo di localizzazione e raccolta delle stringhe, facendoti risparmiare tempo prezioso.
Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi della localizzazione.
Precisione migliorata: Le traduzioni alimentate dall'IA garantiscono risultati contestualmente accurati e di alta qualità.
Soluzione scalabile: Aggiungi facilmente il supporto per nuove lingue man mano che la tua applicazione e la base clienti crescono.

Inizia oggi stesso!

La tua applicazione React verrà tradotta automaticamente quando aggiungi qualsiasi stringa a un componente Translate. Nota che solo gli ambienti con permessi read/write sulla chiave API potranno creare nuove stringhe da tradurre.

Consigliamo di avere un ambiente di staging chiuso e sicuro dove puoi testare la tua applicazione di produzione, aggiungendo nuove stringhe prima di andare in produzione. Questo impedirà a chiunque di rubare la tua chiave API segreta e di potenzialmente gonfiare il progetto di traduzione aggiungendo stringhe indesiderate.

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!