# General Translation Knowledge Base: Alternative a react-intl: General Translation o react-intl
URL: https://generaltranslation.com/it/kb/general-translation-vs-react-intl.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: General Translation consente ai team React di mantenere la sintassi dei messaggi ICU, aggiungendo la generazione delle traduzioni, una terminologia condivisa e la revisione nella Dashboard. react-intl fornisce la formattazione e gli strumenti di FormatJS per la gestione dei cataloghi; General Translation, invece, produce anche le traduzioni.
Category: Internazionalizzazione
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16
react-intl è la [libreria React di FormatJS](https://formatjs.github.io/docs/react-intl). Ogni messaggio si scrive inline come `defaultMessage` in ICU MessageFormat, con una `description` per i traduttori; poi si raccolgono tutti i messaggi in un catalogo JSON con `formatjs extract` e si renderizzano i cataloghi tradotti tramite `IntlProvider`. La libreria non traduce nulla: il catalogo estratto resta a carico tuo, dei tuoi traduttori o di un sistema di gestione delle traduzioni (TMS), e i file tradotti tornano indietro per essere compilati. Anche le librerie di General Translation renderizzano messaggi ICU, ma in più General Translation genera le traduzioni.
## Cosa fa bene react-intl
* **ICU MessageFormat ovunque.** [Plurali con `#` e corrispondenze esatte come `=0`, `select` e `selectordinal`](https://formatjs.github.io/docs/core-concepts/icu-syntax), basati sulle API `Intl` del browser.
* **Testo di origine inline.** FormatJS [consiglia di scrivere `defaultMessage` e `description` inline](https://formatjs.github.io/docs/getting-started/message-declaration) e di lasciare che siano `babel-plugin-formatjs` o `@swc/plugin-formatjs` a generare gli ID dei messaggi, così nessuno deve inventarsi le chiavi.
* **Strumenti per un flusso di lavoro basato su TMS.** [`formatjs extract`](https://formatjs.github.io/docs/tooling/cli) genera il catalogo, i formattatori integrati producono file per Crowdin, Lokalise, Smartling e Transifex, `formatjs compile` esegue il pre-parsing dei messaggi e `formatjs verify` verifica che nei cataloghi non ci siano chiavi mancanti o in eccesso.
* **TypeScript.** [La versione 12 può tipizzare gli argomenti ICU di ogni messaggio](https://formatjs.github.io/docs/react-intl/upgrade-guide-12.x).
* **Manutenzione attiva.** [La versione 12 è stata rilasciata a settembre 2026](https://github.com/formatjs/formatjs/blob/main/packages/react-intl/CHANGELOG.md), con licenza BSD-3-Clause.
## Cosa react-intl lascia nelle tue mani
Ecco una piccola inbox realizzata con react-intl. Il testo in inglese rimane nel componente come `defaultMessage`:
```jsx title="Inbox.jsx"
import { FormattedMessage } from 'react-intl';
export function Inbox({ count }) {
return (
);
}
```
`formatjs extract` trasforma quei messaggi in un catalogo le cui chiavi sono ID generati:
```json title="lang/en.json"
{
"U5vJOY": {
"defaultMessage": "You have {count, plural, one {# unread message} other {# unread messages}}.",
"description": "Number of unread messages in the inbox"
},
"gBGgGs": {
"defaultMessage": "Inbox",
"description": "Heading of the inbox page"
}
}
```
Ogni lingua di destinazione richiede messaggi tradotti che mantengano intatta la sintassi ICU. `IntlProvider` accetta stringhe di messaggi o messaggi precompilati; questi ultimi si ottengono con `formatjs compile`. I descrittori estratti contengono ciascun messaggio insieme alla relativa descrizione. Per generare gli ID come in questo esempio, configura il plugin Babel o SWC nella tua build. Nel [Next.js App Router](https://formatjs.github.io/docs/guides/nextjs-app-router), i componenti di react-intl vengono eseguiti all'interno dei componenti client, mentre il codice lato server formatta i messaggi tramite `createIntl` di `react-intl/server`.
## Mantieni i messaggi ICU e genera le traduzioni
Le librerie di General Translation svolgono lo stesso compito di react-intl: renderizzano i messaggi ICU, applicano le regole del plurale di ciascuna impostazione regionale e formattano numeri, valute e date. Le tue stringhe ICU si possono migrare quasi senza modifiche, perché [`useGT`](/docs/react/reference/hooks/use-gt) accetta la stessa sintassi:
```tsx title="Inbox.tsx"
import { useGT } from 'gt-react';
export function Inbox({ count }: { count: number }) {
const gt = useGT();
return (
{gt('Inbox', { $context: 'Heading of the inbox page' })}
{gt('You have {count, plural, one {# unread message} other {# unread messages}}.', {
count,
$context: 'Number of unread messages in the inbox',
})}
);
}
```
[`npx gt translate`](/docs/cli/reference/commands/translate) estrae queste stringhe, genera le traduzioni sfruttando le relative note di contesto e scrive i cataloghi di destinazione, il tutto con un unico comando. Nell'esempio, entrambe le descrizioni FormatJS vengono mantenute come `$context`. I [termini del Glossario e i prompt personalizzati](/docs/platform/dashboard/guides/defining-context-for-translations) condivisi guidano terminologia e tono, mentre i revisori modificano i risultati nella [dashboard](/docs/platform/dashboard/guides/reviewing-translations).
Il `#` viene formattato in base all'impostazione regionale, quindi un conteggio di 12345 diventa "12,345" in inglese e "12.345" in spagnolo. Per il JSX con markup, [``](/docs/react/reference/components/t) traduce l'intero blocco contrassegnato, elementi inclusi. In `gt-next` funziona direttamente nei Componenti server.
La dashboard, la landing page e l'app iOS di Ramp sono disponibili in oltre 11 impostazioni regionali grazie a General Translation. (Vedi le [distribuzioni in produzione](https://generaltranslation.com/enterprise).)
## react-intl e General Translation a confronto
| Funzionalità | react-intl | General Translation |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Come scrivi i testi | `defaultMessage` inline in ICU, estratto in un catalogo JSON | JSX inline in [``](/docs/react/reference/components/t), oppure stringhe ICU in [`useGT`](/docs/react/reference/hooks/use-gt) |
| Traduce i tuoi contenuti | No | Sì, con [`npx gt translate`](/docs/cli/reference/commands/translate) |
| Flusso di lavoro del catalogo | Estrai i messaggi, traducili con il flusso di lavoro che preferisci e, se vuoi, precompilali; il plugin genera gli ID | [`npx gt translate`](/docs/cli/reference/commands/translate) estrae e traduce prima della build |
| Contesto di traduzione | Il messaggio e la sua descrizione | Stringhe ICU con `$context`; struttura JSX marcata con componenti inline; Glossario e prompt personalizzati condivisi |
| Next.js App Router | Componenti all'interno dei componenti client; `createIntl` sul server | [``](/docs/react/reference/components/t) nei Componenti Server e Client |
| Licenza | [BSD-3-Clause](https://github.com/formatjs/formatjs/blob/main/packages/react-intl/LICENSE.md) | Librerie JavaScript e CLI con licenza MIT |
Mantieni react-intl se i tuoi cataloghi ICU e i formattatori del TMS funzionano già, se ti affidi agli argomenti tipizzati dei messaggi o a `formatjs verify`, oppure se usi FormatJS al di fuori di React. Scegli General Translation se vuoi continuare a scrivere in ICU, integrando però la generazione e la revisione delle traduzioni nel tuo flusso di lavoro di sviluppo.
## Migrare da react-intl
Migra un componente o una route alla volta. Sostituisci ogni `` con una chiamata a [`useGT`](/docs/react/reference/hooks/use-gt) che ne mantenga la stringa ICU e ne passi la descrizione come `$context`, come mostrato sopra. Per il JSX con markup complesso, usa [``](/docs/react/reference/components/t#context). Continua a caricare i cataloghi react-intl esistenti per i componenti non ancora migrati. Una volta migrato l'ultimo componente, rimuovi il plugin FormatJS e gli script di estrazione e compilazione. (Consulta [Migrare le librerie i18n](/docs/react/guides/migrating-i18n-libraries).)
## Altre alternative a react-intl
I team che abbandonano react-intl prendono in considerazione anche queste librerie:
* **i18next:** renderizza cataloghi basati su chiavi con gestione dei plurali e, insieme a react-i18next e next-i18next, è una scelta diffusa per le app React e Next.js. (Vedi [General Translation vs. i18next](/kb/general-translation-vs-i18next).)
* **Lingui:** mantiene i testi inline e compila i messaggi in cataloghi con un Runtime leggero. (Vedi [General Translation vs. Lingui](/kb/general-translation-vs-lingui).)
* **next-intl:** renderizza i messaggi dei cataloghi nelle app Next.js basate su App Router, inclusi i Componenti server. (Vedi [next-intl vs. gt-next](/kb/next-intl-vs-gt-next).)
* **Paraglide JS:** compila i cataloghi in funzioni di messaggio tipizzate e tree-shakable. (Vedi [General Translation vs. Paraglide JS](/kb/general-translation-vs-paraglide).)
* **Intlayer:** conserva il contenuto di ogni componente in un file di dichiarazione tipizzato, con tutte le lingue affiancate. (Vedi [General Translation vs. Intlayer](/kb/general-translation-vs-intlayer).)
## Punti chiave
* react-intl formatta i messaggi ICU e fornisce strumenti per la gestione dei cataloghi; la generazione delle traduzioni è affidata a un flusso di lavoro separato.
* General Translation estrae e traduce con un unico comando CLI, mantenendo il contesto fornito dalle descrizioni e mettendo a disposizione dei revisori un editor nella Dashboard.
* Le tue stringhe ICU si trasferiscono quasi invariate in [`useGT`](/docs/react/reference/hooks/use-gt), un componente alla volta.
## Related questions
- [General Translation vs. i18next, react-intl e next-intl: quale libreria i18n scegliere?](https://generaltranslation.com/it/kb/general-translation-vs-i18n-libraries.mdx): Le librerie open source come i18next, react-intl e next-intl non traducono nulla. Si limitano a visualizzare le traduzioni che fornisci in un file di catalogo per ciascuna lingua, scritte da te, dai tuoi traduttori o da un servizio esterno. Anche le librerie di General Translation sono open source e svolgono lo stesso compito, ma General Translation si occupa anche della traduzione, usando il tuo codice come contesto.
- [Alternative a i18next: General Translation vs. i18next](https://generaltranslation.com/it/kb/general-translation-vs-i18next.mdx): Scegli General Translation per mantenere i testi inline nei componenti React e generare le traduzioni sfruttando la struttura JSX e il contesto del prodotto. In alternativa, puoi continuare a usare i18next e affidarti a General Translation per tradurre i cataloghi esistenti. i18next si occupa del rendering dei messaggi e della selezione dei plurali, mentre la generazione delle traduzioni è affidata a un servizio separato.
- [General Translation o Lingui: quale scegliere?](https://generaltranslation.com/it/kb/general-translation-vs-lingui.mdx): Scegli General Translation per mantenere i testi inline come con Lingui e generare le traduzioni usando la struttura JSX come contesto. Lingui estrae i messaggi inline in cataloghi che i tuoi traduttori o un servizio collegato dovranno tradurre. La CLI di General Translation aggiorna le traduzioni man mano che il codice cambia e il tuo team le revisiona nella Dashboard.
- [General Translation vs. vue-i18n: quale scegliere?](https://generaltranslation.com/it/kb/general-translation-vs-vue-i18n.mdx): General Translation consente ai team Vue di scrivere il testo sorgente direttamente nei modelli e di generare le traduzioni con la CLI. Il suo plugin gt-vue renderizza questi contenuti con una formattazione locale-aware di plurali e numeri. Sceglilo per eliminare la manutenzione dei file sorgente basati su chiavi; vue-i18n resta una scelta valida per i team che usano il modulo i18n di Nuxt e un flusso di lavoro consolidato basato su cataloghi.
- [Come si gestiscono i plurali in React?](https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx): Non inserire la logica del plurale direttamente nel codice con controlli come n === 1. Per le app solo in inglese basta un semplice helper, ma le app multilingue richiedono regole del plurale locale-aware, che un componente i18n come `` di gt-react o gt-next gestisce per ogni lingua.
## Previous and next questions
- Previous question: [Alternative a Phrase: General Translation vs. Phrase](https://generaltranslation.com/it/kb/general-translation-vs-phrase.mdx)
- Next question: [Alternative a Smartling: General Translation vs. Smartling](https://generaltranslation.com/it/kb/general-translation-vs-smartling.mdx)
## Sitemap
See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.