React i18n senza chiavi di traduzione

La maggior parte delle librerie React i18n funziona con le chiavi di traduzione. Sostituisci ogni testo della tua app con una chiave, conservi un file di traduzioni per ogni lingua e cerchi il testo giusto in fase di esecuzione. Magic Translate salta tutto questo: tu scrivi il testo nella tua lingua e viene tradotto quando viene visualizzata la pagina.

Come funziona i18n con chiavi di traduzione

Con una libreria basata su tasti, un semplice pulsante ha il seguente aspetto:

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

Ogni nuovo testo significa una nuova chiave, una voce in ogni file di lingua e una traduzione per ogni lingua. Quando cambi il testo in inglese, le altre lingue non sono aggiornate finché qualcuno non le traduce nuovamente.

Lo stesso pulsante senza tasti

Con Magic Translate, il testo rimane dov'è:

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

Non ci sono file di lingua da mantenere. Quando modifichi il testo, la nuova versione viene tradotta la prossima volta che viene mostrata e da quel momento in poi la traduzione viene memorizzata nella cache.

Guida introduttiva

1. Iscriviti a Magic Translate e ottieni la tua chiave API. Il piano gratuito include 5.000 caratteri al mese.
2. Installa il client e inserisci la tua app nel MagicTranslateProvider, come mostrato nella guida React.
3. Inserisci il tuo testo in <T>. Per props e attributi, usa useT hook.

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

Se esegui il rendering sul server, usa invece React SSR, in modo che i motori di ricerca e gli utenti ottengano un codice HTML completamente tradotto.

Quando le chiavi di traduzione sono ancora la scelta migliore

La traduzione automatica è buona, ma non viene rivista da una persona. Se ogni parola della tua app deve essere approvata da un traduttore, ad esempio per testi legali o medici, una libreria basata su chiavi con traduzioni umane ti dà quel controllo. Molte app combinano entrambi: Magic Translate per la maggior parte dell'interfaccia e testi revisionati laddove è importante.

Domande frequenti

La traduzione è abbastanza veloce?

La prima traduzione di un testo può richiedere alcuni secondi. Dopodiché, viene memorizzato nella cache e impiega dai 100 ai 300 ms. Con React SSR, le traduzioni avvengono sul server, quindi gli utenti non le aspettano mai.

Quanto costa?

L'utilizzo viene conteggiato in caratteri tradotti al mese e il testo già tradotto non viene conteggiato nuovamente. Scopri come viene calcolato l'utilizzo e i prezzi.

Quali lingue sono supportate?

Più di 70 anni. Vedi l'elenco completo delle lingue supportate.