Descripción general

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

import { withGTConfig } from 'gt-next/config';

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

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

Usa withGTConfig para:

• Configurar los idiomas admitidos y el locale predeterminado (también llamado idioma de contenido de respaldo predeterminado).
• Establecer claves de API y IDs de proyecto para acceder a los servicios de GT.
• Definir el comportamiento de carga.
• Configurar los ajustes de timeout.
• Configurar endpoints personalizados.
• Personalizar el comportamiento de traducción, el almacenamiento en caché y el envío por lotes de solicitudes.
• Configurar la validación en tiempo de compilación mediante el plugin de SWC.

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 pasada a withGTConfig.

Consulta la referencia de gt.config.json para obtener más información sobre el archivo de configuración.

Props requeridas

Props recomendadas

Props avanzadas

Devuelve

Una función (NextConfig) => NextConfig que amplía el objeto de configuración de Next.js con la configuración de GT especificada.

Excepciones

Lanza un Error si falta el projectId y se usan las URL predeterminadas, o si se requiere la clave de API y esta falta.

Configuración de renderizado

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

Métodos de renderizado

• skeleton: Renderiza un fragmento.
• replace: Renderiza contenido en el idioma predeterminado mientras espera.
• default: Para locales con el mismo idioma (p. ej., en-US y en-GB), se comporta como replace. Para locales con idiomas diferentes (p. ej., en-US y fr), se comporta como skeleton.

Timeout

Los timeouts solo se aplican a las traducciones en tiempo de ejecución, o a las traducciones que deben realizarse bajo demanda porque no se han almacenado en caché.

Los timeouts están configurados en 8 segundos de forma predeterminada. Esta decisión de diseño busca facilitar a los usuarios de Vercel, que tienen un timeout predeterminado de 10 segundos para las funciones serverless en el plan gratuito.

Ejemplos

Configuración de renderizado

Este ejemplo configura gt-next para mostrar un esqueleto mientras se cargan las traducciones. Si la carga de traducciones tarda más de 8 segundos, el método excederá el tiempo de espera y mostrará el contenido en el idioma predeterminado.

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

import { withGTConfig } from 'gt-next/config';

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

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

Validación en tiempo de compilación

Este ejemplo configura el complemento de SWC para tratar las infracciones de contenido dinámico como errores de compilación en lugar de advertencias.

import { withGTConfig } from 'gt-next/config';

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

export default withGTConfig(nextConfig, {
  // Fallar la compilación ante infracciones dinámicas de JSX
  dynamicJsxCheckLogLevel: 'error',
  // Advertir sobre infracciones de cadenas dinámicas  
  dynamicStringCheckLogLevel: 'warn',
});

Notas

• withGTConfig integra la funcionalidad de traducción de GT en tu app de Next.js y debe usarse en el archivo de configuración raíz.
• Parámetros como apiKey y projectId pueden definirse directamente en la configuración o como variables de entorno.
• Parámetros avanzados como renderSettings y _batchInterval permiten un control granular del comportamiento y el rendimiento de la traducción.

Próximos pasos

• Agrega traducción a tu CD process.