# gt-next: General Translation Next.js SDK: withGTConfig
URL: https://generaltranslation.com/es/docs/next/api/config/with-gt-config.mdx
---
title: withGTConfig
description: Referencia de la API de withGTConfig(), antes initGT()
---

## Descripción general

`withGTConfig` es la principal forma de configurar la biblioteca `gt-next`.
Envuelve directamente un objeto `NextConfig`.

```js title="next.config.mjs"
import { withGTConfig } from 'gt-next/config';

const nextConfig = {
    // tu next.config.js existente
}

export default withGTConfig(nextConfig, {
  // Opciones de configuración adicionales
});
```

<Callout>
  **Antiguo**

  `initGT` es la forma antigua de configurar la biblioteca `gt-next`. Devuelve una función de callback que luego se invoca con el objeto `NextConfig`.
  Los props de ambas funciones son los mismos, con la excepción de que `withGTProps` requiere que también se le pase `NextConfig`.
</Callout>

Usa `withGTConfig` para:

* Configurar los idiomas compatibles y la configuración regional predeterminada (también conocida como idioma de respaldo).
* Establecer claves API e IDs de proyecto para acceder a los servicios de GT.
* Establecer el comportamiento de carga.
* Configurar los tiempos de espera.
* Configurar endpoints personalizados.
* Personalizar el comportamiento de traducción, el almacenamiento en caché y la agrupación de solicitudes.
* Configurar la validación en tiempo de compilación mediante el plugin SWC.

<Callout>
  `withGTConfig` debe usarse en tu archivo `next.config.js` para habilitar la funcionalidad de traducción.
</Callout>

## Referencia

De forma predeterminada, `withGTConfig` buscará un archivo `gt.config.json` en el mismo directorio que tu archivo `next.config.js`.

Este archivo JSON se cargará y se combinará con la configuración que se pase a `withGTConfig`.

Consulta la referencia de [gt.config.json](/docs/next/api/config/gt-config-json) para obtener más información sobre el archivo de configuración.

<Callout>
  La herramienta CLI solo leerá la configuración desde el archivo `gt.config.json`, por lo que
  te recomendamos usar el archivo `gt.config.json` como fuente de verdad de tu aplicación.

  Las opciones de configuración adicionales que no estén en el archivo `gt.config.json` pueden pasarse directamente a `withGTConfig` como props.
</Callout>

### Props requeridas

<TypeTable
  type={{
  "nextConfig": {
    type: 'NextConfig',
    optional: false,
  },
}}
/>

### Props recomendadas

<TypeTable
  type={{
  "defaultLocale?": {
      type: 'string',
      optional: true,
      default: "locales[0] || 'en'"
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
  "description?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

| Prop            | Descripción                                                                                                                                                                                                                                                                                                              |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `defaultLocale` | Configuración regional predeterminada de la aplicación. El inglés será el idioma de respaldo cuando no se especifique ninguna.                                                                                                                                                                                           |
| `locales`       | Lista cerrada de configuraciones regionales compatibles para la aplicación. Si se recibe una solicitud para una configuración regional no compatible, se redirigirá al siguiente idioma preferido del navegador que figure en la lista. Si no se encuentra ninguna coincidencia, se usará `defaultLocale` como respaldo. |
| `description`   | Descripción del sitio en lenguaje natural, usada para facilitar la traducción.                                                                                                                                                                                                                                           |

### Props avanzadas

<TypeTable
  type={{
      "projectId?": {
              type: 'string',
              optional: true,
      },
      "apiKey?": {
              type: 'string',
              optional: true,
      },
      "devApiKey?": {
              type: 'string',
              optional: true,
      },
      "preferredModelProvider?": {
              type: '"anthropic" | "openai"',
              optional: true,
      },
      "runtimeUrl?": {
              type: 'string',
              optional: true,
      },
      "cacheUrl?": {
              type: 'string',
              optional: true,
      },
      "cacheExpiryTime?": {
          type: 'number',
          optional: true,
          default: 60000,
      },
      "renderSettings?": {
          type: 'RenderSettings',
          optional: true,
      },
      "maxConcurrentRequests?": {
          type: 'number',
          optional: true,
          default: 100,
      },
      "batchInterval?": {
          type: 'number',
          optional: true,
          default: 50,
      },
      "maxBatchSize?": {
          type: 'number',
          optional: true,
          default: 25,
      },
      "dictionary?": {
          type: 'string',
          optional: true,
      },

  }}
/>

| Prop                     | Descripción                                                                                                                                                                                                                                                                                                                                            |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `projectId`              | ID del proyecto, que puedes incluir aquí o como variable de entorno.                                                                                                                                                                                                                                                                                   |
| `apiKey`                 | Aunque no se recomienda, puedes incluir aquí una clave de API. También puede definirse como variable de entorno.                                                                                                                                                                                                                                       |
| `devApiKey`              | Aunque no se recomienda, puedes incluir aquí una clave de API de desarrollo. También puede definirse como variable de entorno.                                                                                                                                                                                                                         |
| `preferredModelProvider` | Tu proveedor de modelos de IA preferido. Actualmente, solo están habilitados [Anthropic](https://anthropic.com) y [OpenAI](https://openai.com). Déjalo en blanco y determinaremos el mejor proveedor para cada traducción. En periodos de mucho uso o cuando un proveedor esté deshabilitado, no podemos garantizar que se use tu proveedor preferido. |
| `runtimeUrl`             | URL base de la API de GT. Para desactivar la traducción automática, establécela como una cadena vacía.                                                                                                                                                                                                                                                 |
| `cacheUrl`               | URL donde se almacenan las traducciones en caché. Puede personalizarse para que apunte a un servidor de caché propio.                                                                                                                                                                                                                                  |
| `cacheExpiryTime`        | Tiempo, en milisegundos, antes de que caduquen las traducciones almacenadas localmente en caché.                                                                                                                                                                                                                                                       |
| `renderSettings`         | Objeto que especifica el comportamiento de carga de las traducciones en runtime.                                                                                                                                                                                                                                                                       |
| `maxConcurrentRequests`  | Número máximo de solicitudes de traducción simultáneas permitidas hacia la API de GT.                                                                                                                                                                                                                                                                  |
| `maxBatchSize`           | Número máximo de traducciones que se agrupan antes de enviar una solicitud.                                                                                                                                                                                                                                                                            |
| `batchInterval`          | Intervalo, en milisegundos, entre solicitudes de traducción por lotes. Ayuda a controlar la frecuencia con la que se envían las solicitudes.                                                                                                                                                                                                           |
| `dictionary`             | Ruta opcional del archivo de configuración del diccionario. Al igual que `i18n`, acepta una cadena para especificar una ruta personalizada. Los diccionarios llamados `dictionary.js` (o `.jsx`, `.ts`, `.tsx`, etc.) ubicados en la raíz o en la carpeta `src` son compatibles de forma predeterminada.                                               |

### Devuelve

Un objeto `NextConfig` ampliado con la configuración de GT especificada.

### Excepciones

Lanza un `Error` si falta `projectId` y se usan las URL predeterminadas, o si se requiere la clave de API y no está presente.

***

## Configuración de renderizado

La configuración de renderizado controla el comportamiento de las traducciones mientras se cargan.
Esto solo se aplica a las traducciones que se realizan en runtime.
Si la traducción está en caché, el tiempo de respuesta es demasiado bajo como para justificar un comportamiento de carga.

<TypeTable
  type={{
method: {
    description: 'El método usado para renderizar la página.',
    type: '"skeleton" | "replace" | "default"',
    optional: false,
    default: "default"
},
timeout: {
    description: 'El tiempo en milisegundos antes de que venza el tiempo de espera del método.',
    type: 'number',
    optional: true,
    default: 8000,
},
}}
/>

| Propiedad | Descripción                                                                                                      |
| --------- | ---------------------------------------------------------------------------------------------------------------- |
| `method`  | El método usado para renderizar la página. Las opciones son `skeleton`, `replace` y `default`.                   |
| `timeout` | El tiempo en milisegundos antes de que venza el tiempo de espera del método. El valor predeterminado es 8000 ms. |

### Métodos de renderizado

* `skeleton`: Renderiza un fragmento.
* `replace`: Renderiza el contenido en el idioma predeterminado mientras espera.
* `default`: Para configuraciones regionales con el mismo idioma (es decir, `en-US` y `en-GB`), se comporta como replace. Para configuraciones regionales con idiomas distintos (es decir, `en-US` y `fr`), se comporta como skeleton.

### Tiempo de espera

Los tiempos de espera solo se aplican a las traducciones en runtime, es decir, a las traducciones que deben realizarse bajo demanda porque no se han almacenado en caché.

De forma predeterminada, los tiempos de espera se establecen en 8 segundos.
Esta decisión de diseño está pensada para los usuarios de vercel, que en el plan gratuito tienen un tiempo de espera predeterminado de 10 segundos para las funciones serverless.

***

## Ejemplos

### Configuración de renderizado

Este ejemplo configura `gt-next` para mostrar un skeleton mientras se cargan las traducciones.
Si la traducción tarda más de 8 segundos, el método superará el tiempo de espera y mostrará el contenido en el idioma predeterminado.

```json title="gt.config.json"
{
  "defaultLocale": "en-US",
  "locales": ["en-US", "es", "fr"],
}
```

```js title="next.config.mjs" copy
import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Tus otras configuraciones de Next.js
};

export default withGTConfig(nextConfig, {
  renderSettings: {
    method: 'skeleton',
    timeout: 10000,
  },
});
```

***

## Notas

* `withGTConfig` integra la funcionalidad de traducción de GT en tu aplicación de Next.js y debe usarse en el archivo de configuración principal.
* Parámetros como `apiKey` y `projectId` pueden configurarse directamente en la configuración o como variables de entorno.
* Los parámetros avanzados, como `renderSettings` y `_batchInterval`, permiten un control detallado del comportamiento y el rendimiento de la traducción.

## Siguientes pasos

* Añade [la traducción a tu proceso de CD](/docs/next/tutorials/quickdeploy).