withGTConfig()

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 = {
    // your existing next.config.js
}

export default withGTConfig(nextConfig, {
  // Additional configuration options
});

Utiliza withGTConfig() para:

• Configurar los idiomas soportados y el locale predeterminado (también conocido como idioma de respaldo).
• Establecer claves API e IDs de proyecto para acceder a los servicios de GT.
• Definir el comportamiento de carga.
• Configurar los ajustes de tiempo de espera.
• Configurar endpoints personalizados.
• Personalizar el comportamiento de traducción, el almacenamiento en caché y el agrupamiento de solicitudes.

Referencia

Por defecto, withGTConfig() buscará un archivo gt.config.json en el mismo directorio que tu archivo next.config.js.

Este archivo json se cargará y se fusionará 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

Retorna

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 usan URLs predeterminadas, o si se requiere la clave API y falta.

Configuración de renderizado

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

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 (por ejemplo, en-US y en-GB) se comporta como replace. Para configuraciones regionales con diferentes idiomas (por ejemplo, en-US y fr), se comporta como skeleton.

Tiempo de espera

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

Por defecto, los tiempos de espera se establecen en 8 segundos. Esta decisión de diseño es para facilitar a los usuarios de vercel, quienes tienen un tiempo de espera predeterminado de 10 segundos para 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 traducción tarda más de 8 segundos, el método agotará 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 = {
  // Your other next.js configurations
};

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

Configuración de getLocale()

i18n es una cadena que especifica una ruta personalizada a un archivo que define una función getLocale(). Puedes especificar un comportamiento personalizado para determinar la configuración regional del usuario creando un archivo que exporte una función llamada getLocale().

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

const nextConfig = {};

export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // the default language of your app, usually "en" or "en-US"
  i18n: "./i18n.js"
});

import { cookies } from "next/headers";

export async function getLocale() {
  const cookieStore = await cookies();
  return cookieStore.get('myCustomLocaleCookie') || 'en';
}

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 el rendimiento de la traducción.

Próximos pasos

• Agrega traducción a tu proceso de CD.