Traducciones locales

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 obtenerse desde un CDN (Red de Distribución de Contenidos).

Supongamos que has agregado el comando gtx-cli translate a tu proceso de CD. Esto generará traducciones en formato JSON para tu aplicación. El paso final es sacar estas traducciones de nuestra API y llevarlas a tu aplicación, donde podrán ser utilizadas.

Hay dos formas de hacer esto:

  • En el paquete de tu aplicación: Después de generar las traducciones, guárdalas en el paquete de tu aplicación.
  • En un CDN (predeterminado): Obtén las traducciones desde un CDN en tiempo de ejecución.

Por defecto, gt-next obtendrá las traducciones del General Translation CDN, y al traducir tu aplicación usando nuestra API, las traducciones se guardarán automáticamente en nuestro CDN.

Descripción general

Esta guía te mostrará cómo almacenar traducciones en el paquete de tu aplicación Next.js, en lugar de usar un CDN externo, como el nuestro. Esto significa que las traducciones vivirán en el código de tu aplicación y evitarás depender de infraestructura externa.

En esta guía, te guiaremos a través de:

Las ventajas y desventajas de usar traducciones locales.

Cómo configurar traducciones locales para tu aplicación Next.js.


Compensaciones

¿Cuáles son los beneficios?

  1. 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 un CDN.

  2. Sin dependencia de servicios externos: La capacidad de tu aplicación para cargar traducciones no depende del tiempo de actividad del CDN. Con gt-next, si no se encuentran traducciones para una localidad determinada, la aplicación volverá automáticamente al idioma predeterminado y mostrará el contenido original.

¿Cuáles son las desventajas?

  1. Aumento del 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 app. Esto significa que tu aplicación puede tardar más en cargar en el cliente.

  2. Gestión de contenido: Si deseas editar una traducción (es decir, no te gusta cómo se ha redactado tu contenido en otro idioma), debes volver a desplegar tu aplicación con la nueva traducción cada vez que realices cambios.


Configuración

Prerrequisitos

Asegúrate de que ya hayas configurado tu aplicación Next.js con GT. Si no es así, por favor completa primero la Guía de Inicio Rápido.

Pasos

Agrega un archivo loadTranslations.[js|ts] bajo ./src con el siguiente contenido:

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

Ejecuta el siguiente comando en la raíz de tu proyecto, y cuando se te pregunte si quieres guardar las traducciones en el CDN de GT, selecciona la opción "No".

npx gtx-cli configure

Cuando se te pregunte por la ruta al directorio de traducciones, ingresa ./public/_gt.

Alternativamente, puedes configurar manualmente el archivo gt.config.json para usar traducciones locales. Consulta la documentación de Configuración CLI para más información.

Ahora, cuando ejecutes el comando de traducción, las traducciones se descargarán automáticamente y se incluirán en tu código base.

npx gtx-cli translate

La función loadTranslations se utilizará entonces para cargar estas traducciones en tu aplicación.

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

Personalización adicional

Puedes personalizar aún más la función loadTranslations para cargar traducciones desde otras fuentes, como tu base de datos o tu propio CDN. Consulta la documentación de loadTranslations() para más información.


Notas

  • Las traducciones locales son una alternativa a obtener traducciones desde un CDN.
  • Hay beneficios y desventajas al usar traducciones locales, los cuales se discuten en la sección de Compromisos.

Próximos pasos

  • Consulta loadTranslations() para obtener más información sobre cómo escribir un cargador de traducciones personalizado.

¿Qué te parece esta guía?