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’inserimento di una carta di credito.

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

Avrai inoltre bisogno di aggiungere altre due variabili d'ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della localizzazione di fallback predefinita. In questo esempio, lo imposteremo su en per l'inglese.
• TACOTRANSLATE_ORIGIN: La “cartella” in cui verranno 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 includendo la tua 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>
	);
}

Ora puoi usare il componente Translate ovunque all'interno della 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 raccolta delle stringhe, facendoti risparmiare tempo prezioso.
• Conveniente: Riduce la necessità di traduzioni manuali, abbassando i costi di localizzazione.
• Maggiore precisione: 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 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 sovraccaricare il progetto di traduzione aggiungendo stringhe non autorizzate.

Assicurati di dare un’occhiata agli esempi completi sul nostro profilo GitHub. Se riscontri problemi, non esitare a contattarci, saremo più che felici di aiutarti.

TacoTranslate ti permette di localizzare automaticamente le tue applicazioni React rapidamente da e verso qualsiasi lingua. Traduci gratuitamente!