# General Translation Knowledge Base: Come si traducono le stringhe al di fuori di JSX? URL: https://generaltranslation.com/it/kb/translate-strings-outside-jsx.mdx Docs index: https://generaltranslation.com/llms.txt Description: Passa ogni stringa che non è un figlio JSX, come un segnaposto o una costante a livello di modulo, a una funzione di traduzione nel punto in cui viene renderizzata. L'hook useGT di General Translation restituisce questa funzione, mentre msg con useMessages traduce le costanti definite al di fuori di un componente. Category: Internazionalizzazione Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Le stringhe al di fuori di JSX sono testo che non è un figlio JSX e che quindi un componente di traduzione non può racchiudere: valori di attributi come `placeholder` e `aria-label`, stringhe costruite nel codice e costanti definite a livello di modulo. Ciascuna passa per una funzione di traduzione fornita da un hook (ad esempio `useTranslation` in `react-i18next`), e gli hooks si possono eseguire solo all'interno di un componente. Una costante a livello di modulo viene valutata una sola volta, al caricamento del file, quindi tradurla lì significa fissare la lingua attiva in quel momento (su un server, un'unica lingua per tutti gli utenti). La costante deve invece contenere un riferimento, mentre la stringa viene tradotta nel punto in cui viene renderizzata. ## Video The video is narrated in English, with English captions. [How do I translate strings outside JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-strings-outside-jsx.mp4) (49 s) General Translation translates placeholders with `useGT` and constants with `msg` and `useMessages`. Call `useGT` and pass the placeholder to the function it returns, await `getGT` in async components, register each constant string with `msg` and resolve it with `useMessages`, then run `npx gt translate`. ## Modi per tradurre le stringhe al di fuori di JSX | Approccio | Punti di forza | Nel codice | Cosa resta a tuo carico | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`i18next`](/kb/general-translation-vs-i18next) (`react-i18next`) o `next-intl` | Runtime maturi con una funzione di traduzione per qualsiasi stringa | [`t`](https://www.i18next.com/overview/api#t) di [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) o [`useTranslations`](https://next-intl.dev/docs/environments/server-client-components) accetta una chiave; una costante memorizza la chiave, che viene tradotta al momento del rendering | Inventare una chiave per ogni stringa, scrivere un file per lingua e mantenere tutti i file sincronizzati quando i testi cambiano | | [`react-intl`](/kb/general-translation-vs-react-intl) | I descrittori dei messaggi contengono un ID, un messaggio predefinito e una descrizione per i traduttori | `defineMessages` dichiara i descrittori in una costante e [`formatMessage`](https://formatjs.github.io/docs/react-intl/api#formatmessage) di [`useIntl`](https://formatjs.github.io/docs/react-intl/api#useintl-hook) ne traduce uno al momento del rendering | Assegnare un ID a ogni messaggio, estrarre i messaggi in un file per lingua e produrre tutte le traduzioni | | [Lingui](/kb/general-translation-vs-lingui) | Il testo di origine è il messaggio stesso, quindi non ci sono chiavi da inventare | La macro [`msg`](https://lingui.dev/ref/macro#definemessage) definisce un messaggio in una costante e `_` di [`useLingui`](https://lingui.dev/ref/react) lo traduce al momento del rendering | Eseguire `lingui extract` e `lingui compile` e tradurre ogni catalogo | | General Translation (`gt-react` e `gt-next`) | [`npx gt translate`](/docs/cli/reference/commands/translate) individua ogni stringa nel codice e la traduce prima della build di produzione | [`useGT`](/docs/react/reference/hooks/use-gt) restituisce una funzione da chiamare con la stringa di origine (senza chiave); [`msg`](/docs/react/reference/functions/msg) registra ogni stringa in una costante e [`useMessages`](/docs/react/reference/hooks/use-messages) la traduce al momento del rendering | Passare ogni stringa come letterale, così che la CLI possa trovarla, e rieseguire [`npx gt translate`](/docs/cli/reference/commands/translate) quando i testi cambiano | Usa `i18next` o `next-intl` se la tua app ha già file di chiavi e un traduttore li tiene aggiornati. Usa `react-intl` o Lingui se i traduttori lavorano su cataloghi estratti e hanno bisogno di una descrizione o del testo di origine accanto a ogni messaggio. Usa General Translation se le stringhe sono sparse tra componenti e costanti condivise e cambiano a ogni rilascio. Se una costante è usata da un solo componente, basta spostarla al suo interno: ogni valore diventa una normale chiamata di traduzione. ## Tradurre stringhe al di fuori di JSX con General Translation Con `gt-react` e `gt-next` di General Translation puoi tradurre una stringa all'interno di un componente tramite l'hook [`useGT`](/docs/react/reference/hooks/use-gt) e una costante tramite [`msg`](/docs/react/reference/functions/msg) e [`useMessages`](/docs/react/reference/hooks/use-messages). 1. Per una stringa all'interno di un componente, chiama `const gt = useGT()`, che restituisce direttamente la funzione, e passale una stringa letterale con le variabili come segnaposto con nome: `gt('Welcome back, {name}!', { name: user.name })`. Aggiungi `$context` per far sì che una parola ambigua venga interpretata con il significato corretto. 2. Per una costante, registra ogni stringa con [`msg`](/docs/react/reference/functions/msg) e risolvila con [`useMessages`](/docs/react/reference/hooks/use-messages) nel punto in cui viene renderizzata: ```tsx import { msg, useMessages } from 'gt-react'; const STATUS = { active: msg('Active'), paused: msg('Paused') }; function Badge({ status }: { status: 'active' | 'paused' }) { const m = useMessages(); return {m(STATUS[status])}; } ``` 3. Esegui [`npx gt translate`](/docs/cli/reference/commands/translate) prima della build di produzione. ## Componenti server e livello di modulo I componenti asincroni dell'App Router di Next.js non possono chiamare gli hooks, quindi usano `await` con [`getGT`](/docs/react/nextjs/reference/functions/get-gt) e [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) importati da `gt-next/server`. In un'app `gt-react` lato client configurata con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), la funzione [`t`](/docs/react/reference/functions/t-function) traduce anche a livello di modulo, ma per cambiare lingua è necessario ricaricare completamente la pagina. La guida sulla [traduzione delle stringhe](/docs/react/guides/translating-strings) illustra tutti i passaggi per ciascun framework. ## Related questions - [Come si traduce il testo condizionale in JSX?](https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx): Mantieni la frase intera e traducine ogni versione, perché un operatore ternario la spezza in frammenti che perdono il loro significato e la loro posizione nell'ordine delle parole di ciascuna lingua. General Translation lo fa con `` all'interno di ``, che traduce la frase come un'unica unità. - [Come si formattano numeri, date e valute per ogni impostazione regionale?](https://generaltranslation.com/it/kb/format-numbers-dates-currencies.mdx): Formatta ogni valore al momento del rendering della pagina, usando l'impostazione regionale del lettore e l'API Intl di JavaScript, e tienilo fuori dalla frase tradotta. I componenti ``, ``, `` e `` di General Translation fanno entrambe le cose all'interno di un ``, così una sola traduzione funziona con qualsiasi valore. - [Come si traduce un'app React?](https://generaltranslation.com/it/kb/translate-react-app.mdx): Tradurre un'app React significa internazionalizzarne i componenti affinché vengano renderizzati nella lingua dell'utente, quindi tradurre ogni stringa in ciascuna lingua supportata. gt-react di General Translation traduce il JSX in-place nel componente ``, mentre npx gt translate genera un file per ogni lingua. - [Posso fare i18n senza file di traduzione?](https://generaltranslation.com/it/kb/i18n-without-translation-files.mdx): Sì. Le librerie gt-react e gt-next di General Translation gestiscono l'i18n in React e Next.js senza chiavi di traduzione e senza dover mantenere un file JSON per ogni lingua. I testi restano inline nel JSX all'interno del componente `` e il comando gt translate genera le traduzioni per ogni lingua durante la build, sfruttando il contesto del tuo codice. Locadex può mantenerle aggiornate tramite pull request. ## Previous and next questions - Previous question: [Come si traducono le presentazioni Google Slides?](https://generaltranslation.com/it/kb/translate-google-slides.mdx) - Next question: [Cosa fa l'agente Locadex?](https://generaltranslation.com/it/kb/what-is-locadex.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.