withGTConfig()

Resumen

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 archivo next.config.js existente
}
 
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'es', 'fr'],
});

No es necesario usar withGTConfig() para habilitar la funcionalidad de traducción, pero se recomienda configurar la biblioteca para adaptarse a tus necesidades.

Usa withGTConfig() para:

• Configurar los idiomas soportados y la configuración regional predeterminada (también conocido como idioma de respaldo).
• Establecer claves de API e IDs de proyecto para acceder a los servicios de GT.
• Establecer el comportamiento de carga.
• Configurar la configuración de tiempo de espera.
• Configurar puntos finales personalizados.
• Personalizar el comportamiento de traducción, almacenamiento en caché y agrupación de solicitudes.

Referencia

Props Requeridos

Props Recomendados

Props Avanzados

Devuelve

Una función (NextConfig) => NextConfig que mejora el objeto de configuración de Next.js con los ajustes de GT especificados.

Excepciones

Lanza un Error si falta el projectId y se utilizan URLs predeterminadas, o si se requiere la clave API y falta.

Configuraciones de renderizado

Las configuraciones de renderizado controlan el comportamiento de las traducciones mientras se están cargando. Esto solo se aplica a las traducciones que ocurren en tiempo de ejecución. Si la traducción está en caché, el tiempo de respuesta es demasiado bajo para justificar el 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 (es decir, en-US y en-GB) se comporta como replace. Para locales con diferentes idiomas (es decir, en-US y fr), se comporta como skeleton.

Tiempo de espera

Los tiempos de espera solo se aplican a traducciones en tiempo de ejecución, o traducciones que necesitan realizarse bajo demanda ya que no han sido almacenadas en caché.

Los tiempos de espera se establecen en 8 segundos por defecto. Esta decisión de diseño es para facilitar a los usuarios de vercel que tienen un tiempo de espera predeterminado de 10 segundos para funciones sin servidor en el plan gratuito.

Ejemplos

Locales soportados

Este ejemplo configura gt-next con inglés (en-US) como el locale predeterminado. Soporta exclusivamente traducciones en español (es) y francés (fr), y proporciona una descripción para traducción contextual.

El sitio recurrirá al idioma más adecuado si ninguno de los locales coincide. Buscará idiomas coincidentes (es decir, en-US y en-GB), así como los otros idiomas preferidos que el usuario haya configurado en su navegador. Si todo lo demás falla, entonces recurrirá al idioma predeterminado.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {
  // Your other next.js configurations
}
 
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'es', 'fr'],
  description: 'A personal blog about technology and travel',
});

Configuración de renderizado

Este ejemplo configura gt-next para renderizar un esqueleto mientras espera que se carguen las traducciones. Si la traducción tarda más de 8 segundos, el método se agotará y renderizará el contenido en el idioma predeterminado.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {
  // Your other next.js configurations
};
 
// locales field is left empty, so this configuration supports all 100+ languages
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  renderSettings: {
    method: 'skeleton',
    timeout: 10000,
  },
});

Notas

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

Próximos Pasos

• Agrega traducción a tu proceso de CD.
• Lee más sobre configuración de i18n en nuestra guía de referencia.