# gt-next: General Translation Next.js SDK: Migrar URL: https://generaltranslation.com/es/docs/next/guides/migration.mdx --- title: Migrar description: Aprende a migrar un proyecto a gt-next --- ## Resumen En esta guía se explican los pasos necesarios para migrar un proyecto que ya utiliza una biblioteca de i18n a gt-next. También ofrecemos algunos consejos y sugerencias para que la migración sea lo más fluida posible. ## Requisitos previos * Un proyecto que actualmente utiliza otra biblioteca de i18n. * Conocimientos básicos de la biblioteca `gt-next`. ## ¿Por qué migrar? Hay muchas razones por las que podrías querer migrar tu proyecto a gt-next. Aquí tienes solo algunas: * **No más archivos JSON:** No vuelvas a gestionar traducciones en archivos JSON. Todo tu contenido está integrado en tu código, donde debe estar. * **Traducciones automáticas:** Genera traducciones de alta calidad y adaptadas al contexto con nuestra herramienta CLI. Nunca más tendrás que esperar traducciones. * **Experimenta en desarrollo:** Prueba fácilmente las traducciones en desarrollo con recarga en caliente. ## Configuración Instala `gt-next` y la herramienta CLI `gt`. ```bash npm i gt-next gt ``` ```bash yarn add gt-next yarn add --dev gt ``` ```bash bun add gt-next bun add --dev gt ``` ```bash pnpm add gt-next pnpm add --save-dev gt ``` Crea un archivo `gt.config.json` en la raíz de tu proyecto que incluya una propiedad `defaultLocale` y un array `locales`. ```json title="gt.config.json" copy { "defaultLocale": "en", "locales": ["en", "fr", "es"] } ``` Luego, agrega el componente `` al layout raíz de tu aplicación. ```tsx title="app/layout.tsx" copy import { GTProvider } from 'gt-next' export default function RootLayout({ children }) { return ( {children} ) } ``` A continuación, agrega `withGTConfig` a tu archivo `next.config.js`. ```js title="next.config.ts" copy import { withGTConfig } from 'gt-next/config' const nextConfig = { // Your next.config.ts options } export default withGTConfig(nextConfig, { // Your GT configuration }) ``` Para ver instrucciones más detalladas, consulta la [guía de inicio rápido](/docs/next). En este punto, tienes 3 opciones: 1. Migrar por completo todo tu proyecto a `gt-next` y eliminar la biblioteca de i18n anterior. 2. Migrar por completo tu proyecto, pero seguir usando los diccionarios de la biblioteca de i18n anterior. 3. Seguir usando la biblioteca de i18n anterior por ahora y migrar solo una parte de tu proyecto a `gt-next`. Para obtener más información sobre cada opción, consulta la sección [estrategias de migración](#strategies). ## Estrategias de migración [#strategies] ### Opción 1: migrar por completo todo tu proyecto Esta opción es la más sencilla, pero también la que requerirá la mayor cantidad de cambio 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 con `gt-next`. Si tu aplicación usa hooks de React como `useTranslations`, busca todas las instancias de `useTranslations` en tu base de código y reemplázalas por `useGT`. Luego, tendrás que reemplazar todas las claves de cadena por sus valores de cadena reales. Por ejemplo, si tu código anterior se ve así: ```json title="dictionary.json" { "hello": { "description": "Hello, world!" } } ``` ```tsx export default function MyComponent() { const { t } = useTranslation() return
{t('hello.description')}
} ``` Deberás reemplazarlo por: ```tsx export default function MyComponent() { const gt = useGT() return
{gt('Hello, world!')}
} // O export default function MyComponent() { return Hello, world! } ``` Haz esto en 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-next`, pero quieres seguir usando diccionarios de la biblioteca de i18n anterior y usar solo las funciones inline de GT para el 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 `useTranslations`, y reemplázalas por el hook `useTranslations` de `gt-next`. El hook `useTranslations` funciona de forma muy similar a los hooks `useTranslations` de otras bibliotecas de i18n, y puedes usarlo de la misma manera. ```tsx import { useTranslation } from 'react-i18next' export default function MyComponent() { const { t } = useTranslation() return
{t('hello.description')}
} ```
```tsx import { useTranslations } from 'gt-next' export default function MyComponent() { const t = useTranslations() return
{t('hello.description')}
} ```
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 archivo de diccionario anterior en este nuevo archivo. La función de inicialización `withGTConfig` en `next.config.js` detectará automáticamente el archivo de diccionario en la raíz de tu proyecto o en el directorio `src`. Consulta la guía de [diccionarios](/docs/next/guides/dictionaries) para obtener más detalles. ### Opción 3: Sigue usando la biblioteca de i18n anterior por ahora y migra solo una parte de tu proyecto a `gt-next` Esta opción es la más flexible y requiere 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-next`. Por ejemplo, puedes seguir usando la biblioteca de i18n anterior para algunos componentes y usar `gt-next` solo para otros y para contenido nuevo. Esta opción no se recomienda, ya que tendrás que gestionar dos bibliotecas de i18n diferentes en tu proyecto, lo que puede resultar complejo y provocar errores. ## Consejos para la migración ### 1. Usa el hook `useGT` o el componente `` siempre que sea posible Siempre que sea posible, te recomendamos usar el hook `useGT` o el componente ``. Esto te facilitará mucho la edición de tu contenido en el futuro y hará que tu base de código sea mucho más legible. ### 2. Usa el hook `useTranslations` para contenido existente El hook `useTranslations` es una excelente forma de seguir usando tus diccionarios 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.txt) * [LLMs-full.txt](/llms-full.txt)