Descripción general

Usa loadTranslations para especificar el comportamiento de carga de traducciones. De forma predeterminada, tu app cargará traducciones desde el CDN de GT en producción. Puedes especificar una función loadTranslations para cargar traducciones desde una fuente diferente, como:

• Desde el bundle de tu app (lo más común)
• Desde una base de datos
• Desde una API
• Desde una CDN diferente

Hemos incorporado compatibilidad para cargar traducciones desde archivos locales en el bundle de tu app. Sigue esta guía para configurar traducciones locales en tu app de Next.js.

Si quieres definir manualmente tus propias traducciones, consulta la guía de traducciones personalizadas y la función loadDictionary.

Referencias

Parámetros

Descripción

Devuelve

Una Promise<any> que se resuelve en un diccionario que asigna id a traducciones para el locale especificado.

Configuración

Define loadTranslations como la exportación predeterminada de un archivo llamado loadTranslations.js o loadTranslations.ts, ya sea en el directorio src/ o en la raíz. Asegúrate de que la función devuelva una promesa que se resuelva en un objeto con las traducciones para el locale indicado.

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Si deseas usar un name o una ruta diferente, pasa la ruta relativa mediante el parámetro loadTranslationsPath en withGTConfig.

Ejemplos

Obtener traducciones de tu paquete

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Cuando se configura para usar local translations, el comando gtx-cli translate guardará las traducciones en la estructura de archivos de tu proyecto.

npx gtx-cli translate

Cargar traducciones desde una CDN (red de entrega de contenido)

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Carga las traducciones desde tu propia base de datos

export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Notas

• loadTranslations te permite personalizar cómo se cargan las traducciones en tu app en producción.
• Su caso de uso más común es agregar local translations

Próximos pasos

• Conoce por qué podrías querer usar local translations
• Agrega tus propias traducciones con la guía de traducciones personalizadas