Traducciones Locales

Visión general

Esta guía te mostrará cómo almacenar traducciones en tu aplicación Next.js en lugar de usar una CDN. Esto significa que las traducciones residirán en el paquete de tu aplicación. Esto puede conducir a tiempos de carga más rápidos y evita la dependencia de infraestructura externa.

En este documento, (1) explicaremos qué son las traducciones locales y cómo funcionan y (2) te mostraremos cómo configurar traducciones locales para tu aplicación Next.js.

¿Qué son las traducciones locales?

Las traducciones locales se almacenan en el paquete de tu aplicación, en lugar de ser obtenidas desde una CDN (Red de Distribución de Contenido).

Supongamos que has añadido el comando gtx-cli translate a tu proceso de CD. Esto generará archivos JSON que contienen traducciones para tu aplicación. El paso final es obtener estas traducciones de nuestra API e incorporarlas a tu aplicación.

Hay dos formas de hacer esto:

• En el paquete de tu aplicación: Después de generar las traducciones, añádelas al paquete de tu aplicación.
• En una CDN (predeterminado): Obtener las traducciones desde una CDN en tiempo de ejecución.

¿Cuáles son los beneficios?

Tiempos de carga más rápidos: Las traducciones locales se sirven directamente desde tu aplicación, lo que significa que cargarán más rápido que las traducciones servidas desde una CDN.

Sin dependencia de servicios externos: La capacidad de tu aplicación para cargar traducciones no depende de la disponibilidad de una CDN.

¿Cuáles son las desventajas?

Mayor tamaño del paquete: Las traducciones locales aumentarán el tamaño del paquete de tu aplicación, ya que se servirán junto con tu aplicación. Esto significa que tu aplicación puede tardar un poco más en la primera carga.

Gestión de idiomas: Para añadir o eliminar soporte para idiomas, necesitarás volver a desplegar tu aplicación cada vez.

Gestión de contenido: Al igual que con la gestión de idiomas, si deseas cambiar una traducción (es decir, no te gusta cómo se ha expresado tu contenido en un idioma diferente), debes volver a desplegar tu aplicación con la nueva traducción.

Configuración

Requisitos previos

Asegúrate de haber seguido la Guía de inicio rápido.

Pasos

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

npx gtx-cli init

npx gtx-cli translate

¡Eso es todo! Tu aplicación ahora solo cargará traducciones desde tus archivos locales.

Notas

• Las traducciones locales son una alternativa a la obtención de traducciones desde una CDN.
• Puedes personalizar loadTranslations() para también cargar traducciones desde otras fuentes, como tu base de datos o tu propia CDN.

Próximos pasos

• Consulta loadTranslations() para obtener más información sobre cómo escribir un cargador de traducciones personalizado.
• Si deseas escribir tus propias traducciones, consulta traducciones personalizadas.
• Para obtener más información sobre la sintaxis del diccionario, consulta la referencia del diccionario.