Descripción general

Esta guía explica los pasos necesarios para migrar un proyecto que ya utiliza una biblioteca de i18n a gt-react.

También incluimos consejos y sugerencias para que la migración sea lo más fluida posible.

Requisitos previos

• Un proyecto que actualmente utilice otra biblioteca de i18n.
• Conocimientos básicos de la biblioteca gt-react.

¿Por qué migrar?

Hay muchas razones por las que podrías querer migrar tu proyecto a gt-react.

Aquí tienes solo algunas:

• No más archivos JSON: Olvídate de gestionar traducciones en archivos JSON. Todo tu contenido vive junto a tu código, donde corresponde.
• Traducciones automáticas: Genera traducciones de alta calidad y con conocimiento del contexto con nuestra herramienta CLI. Nunca más tendrás que esperar las traducciones.
• Experimenta en desarrollo: Experimenta fácilmente con traducciones en desarrollo con recarga en caliente.

Configuración

npm i gt-react
npm i gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

Estrategias de migración

Opción 1: Migrar por completo todo tu proyecto

Esta opción es la más directa y también requerirá la mayor cantidad de cambios de código de una sola vez.

Después de configurar tu proyecto, tendrás que buscar todas las instancias de tu biblioteca de i18n anterior y reemplazarlas por gt-react.

Si tu app usa hooks de React como useTranslation, busca todas las instancias de useTranslation en tu código y reemplázalas por useGT.

Luego, tendrás que reemplazar todas las claves de texto por sus valores de texto reales.

Por ejemplo, si tu código anterior se ve así:

{
  "hello": {
    "description": "¡Hola, mundo!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

Deberás reemplazarlo por:

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('¡Hola, mundo!')}</div>
}
// OR
export default function MyComponent() {
  return <T>¡Hola, mundo!</T>
}

Haz esto para todas las instancias de tu biblioteca de i18n anterior.

Opción 2: Migra por completo tu proyecto, pero sigue usando diccionarios de la biblioteca de i18n anterior

Supongamos que quieres migrar tu proyecto a gt-react, pero prefieres seguir usando los diccionarios de la biblioteca de i18n anterior y emplear las funciones en línea de GT solo para contenido nuevo.

En este caso, puedes hacer algo similar a la Opción 1:

Busca todas las instancias de tu biblioteca de i18n anterior, como los hooks useTranslation, y sustitúyelas por hooks useTranslations.

El hook useTranslations se comporta de forma muy similar a los hooks useTranslation, y puedes usarlo del mismo modo.

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useTranslations } from 'gt-react'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

En cuanto a la configuración, tendrás que crear un archivo dictionary.[js|ts|json] en la raíz de tu proyecto o en el directorio src. Copia el contenido de tu diccionario anterior en este nuevo archivo y luego pásalo al componente GTProvider.

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>

Consulta la guía de dictionaries para obtener más detalles.

Opción 3: Seguir usando por ahora la biblioteca de i18n antigua y migrar solo parte de tu proyecto a gt-react

Esta opción es la más flexible y requerirá la menor cantidad de cambios de código de una sola vez.

En este caso, puedes hacer algo similar a la Opción 2, pero migrar solo una parte de tu proyecto a gt-react.

Por ejemplo, puedes seguir usando la biblioteca de i18n antigua en algunos componentes y usar gt-react solo en otros y para contenido nuevo.

Sugerencias para la migración

1. Usa el hook useGT o el componente <T> siempre que sea posible

Siempre que sea posible, recomendamos usar el hook useGT o el componente <T>.

Esto hará que editar tu contenido en el futuro sea mucho más fácil y que tu código sea mucho más legible.

2. Usa el hook useTranslations para contenido existente

El hook useTranslations es una excelente manera de seguir usando tus dictionaries existentes.

Lo ofrecemos para facilitar la migración, pero no recomendamos usarlo para contenido nuevo.

3. Uso de IA

Si usas IA para ayudarte a migrar tu proyecto, tenemos LLMs.txt y LLMs-full.txt disponibles en:

• LLMs.txt
• LLMs-full.txt

Estos archivos contienen todo el contenido de esta documentación, por lo que tu herramienta de IA tendrá acceso a toda la información que necesita para ayudarte a migrar tu proyecto.