Traduci le app React con l’IA di qualità umana

Esempio i18n React: demo di un progetto React traducibile

Se il tuo progetto React non è ancora configurato per la localizzazione, non preoccuparti. In questa sezione, ti guideremo attraverso un’app demo e riferimenti di commit di esempio.

Questa guida presuppone che tu abbia già un’app React + TypeScript in esecuzione (Vite, CRA, Next o simili) e almeno alcune stringhe dell’interfaccia utente (UI) in inglese. Aggiungeremo il supporto per l’internazionalizzazione (i18n), organizzeremo i file di traduzione e utilizzeremo Private Translation Cloud per generare traduzioni in modo rapido e semplice.

Per preparare la tua app per la localizzazione, devi spostare il testo fuori dai componenti e nei file di traduzione. Questo rende possibile aggiungere altre lingue in seguito senza modificare il tuo codice.

Il modo più comune per farlo in React è usare i18next e il suo pacchetto di integrazione React react-i18next.

1. Installa le librerie:

npm install i18next react-i18next

npm install i18next react-i18next

2. Crea una cartella per i file di traduzione:

src/i18n/
└── locales/
 └── en.json

src/i18n/
└── locales/
    └── en.json

Qui è dove vivranno tutte le traduzioni. Ogni file all’interno di src/i18n/locales/ rappresenta una singola lingua. Per ora, hai solo bisogno di en.json per l’inglese. Più tardi, Private Translation Cloud genererà file aggiuntivi come fr.json (francese) o de.json (tedesco) e li inserirà nella stessa cartella, in modo che tutto rimanga organizzato in un unico posto.

3. Aggiungi le stringhe della tua lingua di origine (inglese) a en.json:

{
 "welcome": "Welcome",
 "description": "This is a localization demo.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

4. Sostituisci il testo hard-coded in App.tsx con chiavi di traduzione che fanno riferimento al file JSON:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

Se ti stai chiedendo da dove viene la funzione t, la configureremo nel passaggio successivo durante la configurazione di i18n. Per ora, la parte importante è che il tuo componente non si basa più su testo inglese hard-coded.

Nel passaggio precedente, hai creato en.json e hai aggiornato il tuo componente per fare riferimento alle chiavi di traduzione. In questo momento, però, i18n non sa dove cercare quei file JSON. Dobbiamo configurarlo in modo che la funzione t() possa effettivamente estrarre le stringhe giuste.

Invece di importare manualmente ogni file di lingua, puoi usare Vite’s import.meta.glob per caricare automaticamente ogni file *.json all’interno di src/i18n/locales/. Questo significa che quando in seguito aggiungi file come fr.json o de.json (da Private Translation Cloud), verranno rilevati senza lavoro extra.

1. Crea src/i18n/index.ts e configura i18next per caricare automaticamente i tuoi file JSON:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
 { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
 const lang = path.match(/.\/locales\/(.*)\.json$/)?.[1];
 if (lang) {
 resources[lang] = { translation: modules[path].default };
 }
}

i18n
 .use(initReactI18next)
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
  { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

2. Importa questa configurazione una volta nel tuo file di ingresso (src/main.tsx) in modo che i18next sia pronto prima che l’app venga renderizzata:

import './i18n';

import './i18n';

Con questo, la tua app React sa dove trovare i file di traduzione. Quando Private Translation Cloud genera in seguito nuovi file, come fr.json, non è necessario modificare il codice o aggiungere importazioni. Tutto ciò che devi fare è assicurarti che il file tradotto vada in src/i18n/locales/. La prossima volta che esegui l’app, i18n renderà automaticamente disponibile il francese insieme all’inglese.

Ora che la tua app legge i messaggi da src/i18n/locales/en.json, puoi usare Private Translation Cloud per generare le traduzioni in altre lingue.

1. Una volta che ti iscrivi per una prova gratuita o accedi al tuo account Private Translation Cloud, apri il wizard di configurazione e aggiungi il tuo file di origine inglese come risorsa traducibile:

src/i18n/locales/en.json

src/i18n/locales/en.json

Quindi, imposta il percorso di output in modo che Private Translation Cloud sappia dove inserire i file tradotti:

src/i18n/locales/{{lang}}.json

src/i18n/locales/{{lang}}.json

Questo schema crea un file per lingua (ad esempio, fr.json e de.json) nella stessa cartella di en.json.

Private Translation Cloud ha bisogno di alcuni minuti per generare le traduzioni AI. Quando sono pronte, riceverai un file JSON per lingua. Ogni file deve essere inserito nel tuo progetto sotto la cartella src/i18n/locales/.

Ad esempio, se hai tradotto in francese, il file sarà:

src/i18n/locales/fr.json

src/i18n/locales/fr.json

Esempio del contenuto all’interno di src/i18n/locales/fr.json:

Il modo in cui ottieni i file dipende da come usi Private Translation Cloud. In questa demo, abbiamo scelto l’integrazione Git, il che significa che Private Translation Cloud ha aperto una merge request con i file tradotti già inseriti nella cartella corretta.

Con le tue traduzioni a posto, il passaggio finale è aggiornare App.tsx e aggiungere un semplice selettore di lingua. Questo ti consente di passare da una lingua all’altra nella tua app React e confermare che tutto funzioni correttamente.

import { useTranslation } from 'react-i18next';

function App() {
 const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
 );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

Ora puoi passare dall’inglese al francese. Quando esegui l’app in francese, il layout dovrebbe apparire esattamente come in inglese, cambia solo la lingua del testo.

React app in English

React app in French

Una volta che la tua app React è localizzata e funziona in più lingue, puoi sbloccare alcune opzioni avanzate in i18next per migliorare le prestazioni e l’esperienza utente:

• Rileva automaticamente la lingua dell’utente

Per impostazione predefinita, l’app si avvia in inglese e consente agli utenti di cambiare lingua manualmente con un selettore di lingua. Per farla aprire automaticamente nella lingua preferita dall’utente, installa il plugin di rilevamento della lingua:

npm install i18next-browser-languagedetector

npm install i18next-browser-languagedetector

Quindi aggiorna il tuo src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(LanguageDetector) // detect browser/localStorage/etc.
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
 interpolation: { escapeValue: false },
 detection: {
 order: ['querystring', 'localStorage', 'cookie', 'navigator'],
 caches: ['localStorage', 'cookie'],
 },
 react: {
 useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
 },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

Con questa configurazione, i18n controllerà la lingua del browser (e le preferenze memorizzate) al primo caricamento e passerà automaticamente alla lingua preferita dell’utente quando disponibile.

• Carica le traduzioni in modo lazy per bundle più piccoli

Nel passaggio 2 di questa guida, hai configurato import.meta.glob con { eager: true }, che raggruppa tutti i file di traduzione nel caricamento iniziale dell’app. Questo è semplice, ma se supporti molte lingue può aumentare la dimensione del tuo bundle.

Per ottimizzare, puoi caricare le traduzioni in modo lazy usando i18next-http-backend:

npm install i18next-http-backend

npm install i18next-http-backend

Aggiorna src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(Backend) // load JSON over HTTP
 .use(LanguageDetector) // auto-detect + cache
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr'],
 interpolation: { escapeValue: false },
 backend: {
 // Vite serves files from /public at the site root
 loadPath: '/locales/{{lng}}/{{ns}}.json',
 },
 react: { useSuspense: true },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

Ecco come dovrebbero essere organizzati i tuoi file:

public/
 locales/
 en/
 translation.json
 fr/
 translation.json

public/
  locales/
    en/
      translation.json
    fr/
      translation.json

Con questa configurazione, i file di traduzione vengono caricati dal server solo quando è necessaria una lingua. Questo mantiene il bundle iniziale più piccolo, soprattutto se la tua app supporta molte lingue.

Seguendo questi due suggerimenti per l’ottimizzazione, la tua app React può:

• Avviarsi automaticamente nella lingua preferita dell’utente
• Caricare le traduzioni solo quando necessario, mantenendo i tuoi bundle snelli