Descripción general

Usa loadTranslations para especificar cómo se cargan las traducciones. De forma predeterminada, tu app cargará las traducciones desde el GT CDN en producción. Puedes definir una función loadTranslations para cargar las traducciones desde otra fuente, como:

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

Hemos integrado compatibilidad para cargar traducciones desde archivos locales dentro del 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 ids a traducciones para la locale indicada.

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 nombre o una ruta distintos, pasa la ruta relativa mediante el parámetro loadTranslationsPath en withGTConfig.

Ejemplos

Obtener traducciones desde tu paquete

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

Cuando se configura para usar traducciones locales, el comando gtx-cli translate guardará las traducciones en el árbol de archivos de tu proyecto.

npx gtx-cli translate

Cargar traducciones desde una CDN

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://tu-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 habitual es añadir local translations

Próximos pasos

• Descubre por qué quizá te convenga usar local translations
• Añade tus propias traducciones con la guía de traducciones personalizadas