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

Come funziona

Installa il pacchetto TacoTranslate tramite npm:

npm install tacotranslate

Una volta installato il modulo, dovrai creare un account TacoTranslate, un progetto di traduzione e le relative chiavi API. Crea un account qui. È gratuito e non richiede l'inserimento di una carta di credito.

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

Avrai anche bisogno di aggiungere altre due variabili di ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della locale di fallback predefinita. 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.

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 l'applicazione nel provider di contesto di 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>
	);
}

Adesso puoi usare il componente Translate ovunque nella tua applicazione per visualizzare il testo tradotto! Assicurati di consultare la nostra documentazione per maggiori informazioni e per 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 tedioso processo di localizzazione e la raccolta delle stringhe, consentendoti di risparmiare tempo prezioso.
• Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi di localizzazione.
• Maggiore accuratezza: Le traduzioni supportate 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 tua base di clienti crescono.

Inizia oggi!

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 saranno in grado di creare nuove stringhe da tradurre.

Raccomandiamo 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 chiunque di rubare la tua chiave API segreta e, potenzialmente, di gonfiare il tuo progetto di traduzione aggiungendo stringhe non autorizzate.

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!