# gt-next: General Translation Next.js SDK: Descripción general
URL: https://generaltranslation.com/es/docs/next/introduction.mdx
---
title: Descripción general
description: Resumen del SDK de Next.js de General Translation
---
## Introducción
El SDK de General Translation para Next.js es una biblioteca de internacionalización (i18n) de código abierto para aplicaciones Next.js.
Ofrece un conjunto completo de herramientas para internacionalizar tu aplicación Next.js de forma sencilla y mantenible, con paridad funcional respecto a otras bibliotecas de i18n populares. Basado en el [SDK de React](/docs/react), incluye además funciones específicas de Next.js.
El SDK puede usarse de forma autónoma sin la plataforma de General Translation y se comporta de manera similar a otras bibliotecas de i18n.
Sin embargo, también se integra con nuestra plataforma para ofrecer funciones avanzadas:
* Recarga en caliente de traducciones durante el desarrollo
* Traducciones automáticas con IA
* Sincronización de traducciones con la plataforma de General Translation
* Integración nativa con nuestro CDN de traducción
* Traducción on-demand de componentes de React en producción (del lado del servidor)
## Conceptos
Hay 6 conceptos principales que debes comprender para entender el SDK.
Inicialización con [`withGTConfig`](/docs/next/api/config/with-gt-config)
El componente [``](/docs/next/api/components/gtprovider)
El componente [``](/docs/next/api/components/t)
El Hook [`useGT`](/docs/next/api/strings/use-gt)
La función [`msg`](/docs/next/api/strings/msg) para cadenas compartidas
(Opcional) El Hook [`useTranslations`](/docs/next/api/dictionary/use-translations)
## Inicialización con `withGTConfig`
La función [`withGTConfig`](/docs/next/api/config/with-gt-config) inicializa el SDK en tu aplicación de Next.js.
Añádela a tu archivo `next.config.[js|ts]` para configurar el SDK:
```tsx title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// Tus opciones de next.config.ts
};
export default withGTConfig(nextConfig, {
// Tu configuración de GT
});
```
Consulta la [referencia de la API de withGTConfig](/docs/next/api/config/with-gt-config) para más información.
## El componente ``
El componente [``](/docs/next/api/components/gtprovider) proporciona el contexto de traducción a tu aplicación, incluido el idioma actual y las traducciones correspondientes.
```tsx
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Importante:** El provider debe envolver toda tu aplicación y colocarse lo más arriba posible en el árbol de componentes, por ejemplo, en tu layout raíz.
El provider solo es necesario para las funciones del lado del cliente. Las aplicaciones que se ejecutan únicamente del lado del servidor no lo requieren, aunque igualmente puede incluirse.
Consulta la [referencia de la API de `GTProvider`](/docs/next/api/components/gtprovider) para obtener más información.
## El componente ``
El componente [``](/docs/next/api/components/t) es la forma recomendada de traducir contenido en tu aplicación.
Es un componente de React que puede usarse para envolver cualquier elemento JSX y renderiza automáticamente el contenido del elemento en un idioma compatible.
Recomendamos usar el componente [``](/docs/next/api/components/t) siempre que sea posible, ya que ofrece la mayor flexibilidad para las traducciones.
A diferencia de las cadenas, el componente [``](/docs/next/api/components/t) puede usarse para traducir contenido HTML, lo que lo hace mucho más potente que traducir cadenas.
### Ejemplos
```tsx
Hello, world!
```
```tsx
Here is an image
```
```tsx
Formatting can be done easily with the `` component.
{1000}{new Date()}{1000}
```
El componente [``](/docs/next/api/components/t) se usa con [componentes de variable](/docs/next/guides/variables) como [``](/docs/next/api/components/num), [``](/docs/next/api/components/datetime) y [``](/docs/next/api/components/currency) para dar formato a contenido dinámico.
Consulta la [guía del componente ``](/docs/next/guides/t) para conocer las distintas formas de usar el componente [``](/docs/next/api/components/t).
## El Hook `useGT`
El Hook [`useGT`](/docs/next/api/strings/use-gt) es un Hook de React que puede usarse de forma similar al componente [``](/docs/next/api/components/t), aunque con algunas limitaciones.
El Hook devuelve una función que puede usarse para traducir cadenas.
```tsx
const gt = useGT();
gt('Hello, world!');
```
En comparación con el componente [``](/docs/next/api/components/t), el Hook [`useGT`](/docs/next/api/strings/use-gt) ofrece más flexibilidad en tu base de código.
Por ejemplo, si tienes una estructura de datos compleja con cadenas anidadas, sería más difícil usar un componente [``](/docs/next/api/components/t).
```tsx
const gt = useGT();
const data = {
title: gt('Hello, world!'),
description: gt('This is a description'),
};
```
Consulta la guía de [cadenas](/docs/next/guides/strings) para saber más sobre el Hook [`useGT`](/docs/next/api/strings/use-gt).
## La función `msg`
La función [`msg`](/docs/next/api/strings/msg) se usa para marcar cadenas para su traducción que se utilizan en varios componentes o se almacenan en objetos de configuración.
Esto resulta especialmente útil para contenido compartido, como etiquetas de navegación, mensajes de formularios o cualquier texto que aparezca en distintos lugares de tu aplicación.
```tsx
// Marcar cadenas para traducción
import { msg } from 'gt-next';
const navItems = [
{ label: msg('Home'), href: '/' },
{ label: msg('About'), href: '/about' },
{ label: msg('Contact'), href: '/contact' }
];
```
```tsx
// Decodificar y usar las cadenas marcadas
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
);
}
```
La función [`msg`](/docs/next/api/strings/msg) codifica cadenas con metadatos de traducción, y [`useMessages`](/docs/next/api/strings/use-messages) (o [`getMessages`](/docs/next/api/strings/get-messages) para componentes del servidor) las decodifica.
Usa [`msg`](/docs/next/api/strings/msg) para contenido compartido que deba traducirse de forma coherente en toda la aplicación. Para contenido específico de un componente, usa preferentemente [``](/docs/next/api/components/t) o [`useGT`](/docs/next/api/strings/use-gt).
Consulta la guía de [cadenas compartidas](/docs/next/guides/shared-strings) para obtener más información sobre la función `msg`.
## El Hook `useTranslations`
El Hook [`useTranslations`](/docs/next/api/dictionary/use-translations) es un Hook de React que devuelve una función que puede usarse para obtener traducciones de una clave determinada.
```tsx title="dictionary.ts"
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
```
```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```
Este comportamiento es similar al de otras bibliotecas de traducción, como [`react-i18next`](https://react.i18next.com/) y [`next-intl`](https://next-intl-docs.vercel.app/).
No recomendamos usar el hook [`useTranslations`](/docs/next/api/dictionary/use-translations) en tu aplicación. Usar con frecuencia el hook [`useTranslations`](/docs/next/api/dictionary/use-translations) hará que tu base de código sea más difícil de mantener
y generará una gran deuda técnica.
En su lugar, te recomendamos usar el componente [``](/docs/next/api/components/t) o el hook [`useGT`](/docs/next/api/strings/use-gt).
Si estás migrando desde otra biblioteca de i18n, el hook [`useTranslations`](/docs/next/api/dictionary/use-translations) es un reemplazo directo y puede ser útil para migrar tu base de código de forma gradual.
Consulta la guía de [diccionarios](/docs/next/guides/dictionaries) para obtener más información sobre el hook [`useTranslations`](/docs/next/api/dictionary/use-translations).
Consulta la [referencia de la API de useTranslations](/docs/next/api/dictionary/use-translations) para obtener más información.
***
## Próximos pasos
**Velo en acción:** Explora [aplicaciones de ejemplo funcionales](/docs/next/tutorials/examples) que muestran cada patrón, o consulta el [catálogo completo de aplicaciones](https://app-catalog.generaltranslation.dev).
* Aprende a configurar tu proyecto de Next.js con el SDK: [Inicio rápido](/docs/next)
* Aprende a traducir contenido JSX con el componente [``](/docs/next/api/components/t): [Guía de traducción de JSX](/docs/next/guides/t)
* Aprende a traducir cadenas con el Hook [`useGT`](/docs/next/api/strings/use-gt): [Guía de traducción de cadenas](/docs/next/guides/strings)
* Aprende a usar cadenas compartidas con la función [`msg`](/docs/next/api/strings/msg): [Guía de cadenas compartidas](/docs/next/guides/shared-strings)
