Per iniziare

Seleziona il tuo framework React per iniziare:

npx gtx-cli@latest

Che cos'è General Translation?

General Translation è un intero stack di internazionalizzazione (i18n) che ti consente di distribuire app multilingue in modo rapido e semplice.

General Translation include:

• Librerie open source per sviluppatori per React e Next.js
• Un servizio di traduzione basato sull’AI
• Un pacchetto infrastrutturale completo per l’erogazione dei contenuti di traduzione

Se desideri utilizzare le librerie GT con il tuo provider di traduzione, consulta la nostra documentazione stand-alone per gt-next e gt-react.

Se desideri usare la tua libreria i18n ma vuoi comunque utilizzare il servizio di traduzione AI di General Translation, consulta la documentazione del nostro CLI.

Se desideri utilizzare General Translation per tradurre i tuoi file JSON, Markdown o MDX, consulta la documentazione del nostro CLI.

npx gtx-cli@latest

Avvia la nostra procedura guidata di configurazione per iniziare!

Funzionalità

⚛️ Traduci interi componenti React inline

• Basta un singolo componente <T> di apertura e chiusura per tradurre un intero componente React.
  • Niente refactoring complessi o chiamate di funzione macchinose.
• Il contenuto è inline e nello stesso punto del tuo codice.
  • Non servono chiavi, stringhe o file aggiuntivi!
• La libreria gestisce tutta la logica i18n dietro le quinte, così non devi pensarci tu.
• Le traduzioni sono sempre sincronizzate con il tuo codice sorgente.
• Le traduzioni includono informazioni contestuali sul contenuto, quindi sono più accurate.

export default function Page() {
  return (
    <T>
      <p>Puoi scrivere qualsiasi JSX come children del componente {'<T>'}.</p>
      <p>
        Ad esempio, puoi scrivere un <a href='/'>link</a> e il testo verrà
        tradotto contestualmente.
      </p>
      <div>
        <div>
          <p>Anche i componenti profondamente annidati vengono tradotti contestualmente.</p>
          <button>Cliccami!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Parità di funzionalità con le librerie esistenti

• Le librerie GT offrono le stesse funzionalità delle librerie esistenti come i18next, react-intl e next-intl.
• Sono supportate funzionalità come dizionari, plurali, valute e routing automatico.

🧠 Servizio di traduzione gratuito con IA

• Il nostro servizio di traduzione gratuito con IA ti permette di creare le traduzioni per la tua app in pochi secondi.
• L’hot reload delle traduzioni aggiorna automaticamente le traduzioni mentre le scrivi.
• Il contenuto HTML viene riorganizzato e personalizzato in base alla lingua.

🔧 Pensato per gli sviluppatori

• La configurazione è semplice e richiede pochi minuti.
• Tutte le librerie GT sono open source e funzionano in modo autonomo.
  • Puoi usare il tuo provider di traduzione oppure il nostro servizio gratuito di traduzione con AI.
• Niente più tempo sprecato a gestire chiavi di traduzione come t('menu.header.title').
  • Scrivi tutto inline!

Consulta il nostro repository su GitHub per il codice sorgente e alcuni progetti di esempio.

Perché scegliere General Translation?

General Translation è un completo stack i18n, che include librerie per sviluppatori, traduzioni basate sull’AI e un pacchetto di infrastruttura completo per app multilingue.

Puoi combinare le nostre librerie con il tuo provider di traduzioni oppure usare il nostro servizio di traduzione gratuito basato sull’AI con la tua libreria i18n.

Per un’esperienza i18n fluida e end‑to‑end, consigliamo di usare le nostre librerie insieme al nostro servizio di traduzione.

Con le librerie GT come gt-react e gt-next, puoi:

1. Traduci i componenti React per intero, non solo le stringhe

L’interfaccia utente passata come children del componente <T> verrà tradotta indipendentemente dalla complessità dell’albero JSX. Ad esempio:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Tutti i figli del <b>componente {`<T>`}</b> verranno tradotti.
      </p>
      <p>
        Elementi come <a href='/'>link</a>
        {', '}
        <button>pulsanti</button>
        {', '}
        e anche{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> componenti profondamente annidati </div>{' '}
          </div>{' '}
        </div>{' '}
        vengono tradotti.
      </p>
    </T> 
  );
}

2. Traduci sia i componenti client che quelli server

Con il supporto di prim’ordine per l’App Router di Next.js e per i React Server Components, puoi tradurre sia i componenti client che quelli server.

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      Ciao, <Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      Ciao, <Var>{name}</Var>
    </T>
  );
}

3. Scrivi i contenuti inline o nei dizionari

Il contenuto JSX inserito in un componente <T> viene contrassegnato per la traduzione:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>Ciao, mondo!</p> {/* traduce <p>Ciao, mondo!</p> */}
    </T>
  );
}

In alternativa, se preferisci il tradizionale approccio basato su dizionari, puoi scrivere i contenuti in un file dizionario:

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // traduce "Hello, world!"
}

4. Visualizza i contenuti tradotti durante lo sviluppo

Non preoccuparti di come la UI renderà nelle diverse lingue: General Translation tradurrà automaticamente i tuoi contenuti in tempo reale mentre li scrivi.

Invece di dover aggiornare più volte la UI in produzione, scrivi i contenuti in inglese una sola volta e lascia che General Translation si occupi del resto.

Vuoi vedere come appaiono gli elementi della UI in tedesco prima del deploy? Nessun problema: General Translation li tradurrà automaticamente per te!

5. Traduci i contenuti on demand

Le app spesso devono tradurre contenuti disponibili solo a runtime. Per Next.js, le librerie GT supportano la traduzione dei contenuti on demand.

Alcuni esempi comuni includono:

• Informazioni specifiche dell’utente
• Contenuti archiviati in remoto
• Contenuti generati dinamicamente

Una volta caricata la traduzione, il tuo componente verrà aggiornato in tempo reale con i nuovi contenuti tradotti.

Per iniziare

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

Pronto a scalare a livello globale? Inizia a tradurre la tua app in pochi minuti e raggiungi utenti in tutto il mondo!