La soluzione migliore 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'aggiunta di una carta di credito.

Nell'interfaccia 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. Ad esempio, potresti aggiungerle a un file .env nella root del tuo progetto.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice di lingua di fallback predefinito. In questo esempio lo imposteremo su en per l'inglese.
• TACOTRANSLATE_ORIGIN: La “cartella” in cui verranno memorizzate le tue stringhe, ad esempio 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 la tua applicazione nel provider del 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 in qualsiasi punto della tua applicazione per mostrare 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, facendoti risparmiare tempo prezioso.
• Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi di localizzazione.
• Maggiore accuratezza: Le traduzioni basate sull'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 potranno creare nuove stringhe da tradurre.

Raccomandiamo di avere un ambiente di staging chiuso e protetto dove puoi testare la tua applicazione di produzione, aggiungendo nuove stringhe prima della messa in produzione. Questo impedirà a 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!