# General Translation Knowledge Base: ¿Cómo traduzco cadenas fuera de JSX?
URL: https://generaltranslation.com/es/kb/translate-strings-outside-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Pasa cada cadena que no sea un hijo de JSX, como un marcador de posición o una constante en el ámbito del módulo, por una función de traducción en el lugar donde se renderiza. El hook useGT de General Translation devuelve esa función, y msg junto con useMessages traduce las constantes definidas fuera de un componente.
Category: Internacionalización
Last updated: 2026-10-21
Authors: Kevin Liu, Kevin Wu
Published: 2026-10-21

Las cadenas fuera de JSX son texto que no es hijo de JSX, por lo que un componente de traducción no puede envolverlas: valores de atributos como `placeholder` y `aria-label`, cadenas construidas en el código y constantes definidas en el ámbito del módulo. Cada una pasa por una función de traducción que proporciona un hook (por ejemplo, `useTranslation` en `react-i18next`), y los hooks solo se ejecutan dentro de un componente. Una constante en el ámbito del módulo se evalúa una sola vez, al cargarse el archivo, así que traducirla ahí deja fijado el idioma que estuviera activo en ese momento (en un servidor, un único idioma para todos los usuarios). Por eso, la constante guarda una referencia y la cadena se traduce donde se renderiza.

## 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`.

## Formas de traducir cadenas fuera de JSX

| Enfoque                                                                         | En qué destaca                                                                                                                                     | En el código                                                                                                                                                                                                                                                                                      | Lo que queda a tu cargo                                                                                                                                                      |
| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`i18next`](/kb/general-translation-vs-i18next) (`react-i18next`) o `next-intl` | Entornos de ejecución maduros con una función de traducción para cualquier cadena                                                                  | [`t`](https://www.i18next.com/overview/api#t) de [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) o [`useTranslations`](https://next-intl.dev/docs/environments/server-client-components) recibe una clave; una constante almacena la clave, que se traduce al renderizar | Inventar una clave para cada cadena, escribir un archivo por idioma y mantener todos los archivos sincronizados a medida que cambian los textos                              |
| [`react-intl`](/kb/general-translation-vs-react-intl)                           | Los descriptores de mensajes incluyen un ID, un mensaje predeterminado y una descripción para los traductores                                      | `defineMessages` declara los descriptores en una constante, y [`formatMessage`](https://formatjs.github.io/docs/react-intl/api#formatmessage) de [`useIntl`](https://formatjs.github.io/docs/react-intl/api#useintl-hook) traduce cada uno al renderizar                                          | Asignar un ID a cada mensaje, extraer los mensajes a un archivo por idioma y producir todas las traducciones                                                                 |
| [Lingui](/kb/general-translation-vs-lingui)                                     | El texto de origen es el propio mensaje, así que no hay que inventar claves                                                                        | La macro [`msg`](https://lingui.dev/ref/macro#definemessage) define un mensaje en una constante, y `_` de [`useLingui`](https://lingui.dev/ref/react) lo traduce al renderizar                                                                                                                    | Ejecutar `lingui extract` y `lingui compile`, y traducir cada catálogo                                                                                                       |
| General Translation (`gt-react` y `gt-next`)                                    | [`npx gt translate`](/docs/cli/reference/commands/translate) encuentra cada cadena en tu código y la traduce antes de la compilación de producción | [`useGT`](/docs/react/reference/hooks/use-gt) devuelve una función a la que llamas con la cadena de origen (sin clave); [`msg`](/docs/react/reference/functions/msg) registra cada cadena en una constante, y [`useMessages`](/docs/react/reference/hooks/use-messages) la traduce al renderizar  | Pasar cada cadena como literal para que la CLI pueda encontrarla, y volver a ejecutar [`npx gt translate`](/docs/cli/reference/commands/translate) cuando cambien los textos |

Usa `i18next` o `next-intl` si tu aplicación ya tiene archivos de claves y un traductor se encarga de mantenerlos al día. Usa `react-intl` o Lingui si los traductores trabajan con catálogos extraídos y necesitan una descripción o el texto de origen junto a cada mensaje. Usa General Translation si las cadenas están repartidas entre componentes y constantes compartidas, y cambian con cada lanzamiento. Si la constante solo la usa un componente, basta con moverla dentro de él: cada valor pasa a ser una llamada de traducción normal.

## Traduce cadenas fuera de JSX con General Translation

Con `gt-react` y `gt-next` de General Translation, puedes traducir una cadena dentro de un componente con el hook [`useGT`](/docs/react/reference/hooks/use-gt), y una constante con [`msg`](/docs/react/reference/functions/msg) y [`useMessages`](/docs/react/reference/hooks/use-messages).

1. Para una cadena dentro de un componente, llama a `const gt = useGT()`, que devuelve directamente la función de traducción, y pásale un literal de cadena con las variables como marcadores de posición con nombre: `gt('Welcome back, {name}!', { name: user.name })`. Añade `$context` para que las palabras ambiguas se traduzcan con el significado correcto.

2. Para una constante, registra cada cadena con [`msg`](/docs/react/reference/functions/msg) y resuélvela con [`useMessages`](/docs/react/reference/hooks/use-messages) allí donde se renderice:

   ```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 <span>{m(STATUS[status])}</span>;
   }
   ```

3. Ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) antes de la compilación de producción.

## Componentes de servidor y ámbito del módulo

Los componentes asíncronos del App Router de Next.js no pueden llamar a hooks, así que usan `await` con [`getGT`](/docs/react/nextjs/reference/functions/get-gt) y [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) de `gt-next/server`. En una aplicación client-side de `gt-react` configurada con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), la función [`t`](/docs/react/reference/functions/t-function) también traduce en el ámbito del módulo, pero para cambiar de idioma es necesario recargar la página por completo. La guía [Traducción de cadenas](/docs/react/guides/translating-strings) detalla todos los pasos para cada framework.

## Related questions

- [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx): Mantén la oración completa y traduce cada una de sus versiones, porque un ternario la divide en fragmentos que pierden su significado y su lugar en el orden de palabras de cada idioma. General Translation lo resuelve con `<Branch>` dentro de `<T>`, que traduce la oración como una sola unidad.
- [¿Cómo doy formato a números, fechas y monedas para cada configuración regional?](https://generaltranslation.com/es/kb/format-numbers-dates-currencies.mdx): Da formato a cada valor cuando se renderiza la página, con la configuración regional del lector y la API Intl de JavaScript, y mantenlo fuera de la oración traducida. Los componentes `<Num>`, `<Currency>`, `<DateTime>` y `<RelativeTime>` de General Translation hacen ambas cosas dentro de un `<T>`, de modo que una sola traducción sirve para cualquier valor.
- [¿Cómo traduzco una aplicación de React?](https://generaltranslation.com/es/kb/translate-react-app.mdx): Traducir una aplicación de React significa internacionalizar sus componentes para que se rendericen en el idioma del usuario y, después, traducir cada cadena a todos los idiomas que admitas. gt-react de General Translation traduce JSX en el mismo documento con el componente `<T>`, y npx gt translate genera un archivo por idioma.
- [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Las bibliotecas gt-react y gt-next de General Translation permiten hacer i18n en React y Next.js sin claves de traducción y sin tener que mantener un archivo JSON por idioma. El texto permanece inline en JSX dentro del componente `<T>`, y el comando gt translate genera las traducciones de cada idioma durante la compilación, con contexto extraído de tu código. Locadex puede mantenerlas al día mediante pull requests.

## Previous and next questions

- Previous question: [¿Cómo reviso y edito traducciones?](https://generaltranslation.com/es/kb/review-translations.mdx)
- Next question: [¿Cómo traduzco contenido en Sanity?](https://generaltranslation.com/es/kb/translate-sanity-content.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.