Introducción

El otro día me encontré con una plantilla de chatbot de IA para Next.js en Vercel. Para mi sorpresa, solo estaba disponible en inglés.

Así que la internacionalicé. En 5 minutos. Aquí te cuento cómo:

Échale un vistazo aquí.

Consulta el código aquí.

¿Por qué internacionalizar?

Muchas veces, los desarrolladores están tan concentrados en crear el producto que se olvidan de los usuarios. Para aplicaciones como chatbots de IA, que son inherentemente multilingües y están diseñadas para ser usadas por cualquiera, ¿de qué sirve un chatbot que solo admite inglés?

La mayoría de las personas en el mundo ni siquiera habla inglés. De hecho, solo alrededor del 20% lo hace. Si estás trabajando en una startup y tu producto solo está disponible en inglés, ¿no te estás perdiendo de más del 80% de posibles clientes?

Resulta que hay una razón por la que la mayoría de los productos solo están disponibles en inglés. Es porque la internacionalización es difícil.

Las librerías existentes como next-intl o next-i18next son un dolor de cabeza de configurar y usar. Y no solo eso: ni siquiera hacen traducciones. Igual tienes que contratar traductores, gestionar diccionarios con cientos de claves y lidiar con todos los demás puntos problemáticos de la internacionalización. Incluso cambios menores en el texto podrían tardar horas, hasta días, en traducirse.

Hasta ahora.

He estado trabajando en una nueva librería llamada gt-next que hace que internacionalizar tu app sea fácil y rápido. Es una solución integral para todas tus necesidades de internacionalización, incluyendo traducciones, routing y más.

Usé gt-next para internacionalizar el chatbot de IA de Vercel en 5 minutos.

Instalación

Comencé haciendo un fork y clonando el repositorio:

git clone https://github.com/vercel/ai-chatbot.git

Luego instalé las dependencias:

npm install

Si tú también estás teniendo conflictos de dependencias como me pasó a mí, prueba a usar esta rama.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

A continuación, instalé los paquetes gt-next y gt-next-cli.

npm install gt-next gt-next-cli

Configuración

Luego ejecuté la herramienta de configuración de la CLI y seleccioné «Sí» para cada pregunta:

npx gt-next-cli setup

Después de esto, añadí algunas configuraciones de locales al plugin de next.config.js:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // francés, español, chino
})

Podría haber agregado más configuraciones regionales, pero solo quería probar el chatbot con algunos idiomas diferentes. ¡No dudes en agregar tantas configuraciones regionales como quieras!

Aquí tienes una lista de todas las que admite gt-next.

Cómo funciona

La base de la biblioteca es el componente <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>Puedes escribir cualquier JSX como elementos hijos del componente {'<T>'}.</p>
      <p>
        Por ejemplo, podrías escribir un <a href="/">enlace</a>
        y el texto se traducirá en contexto.
      </p>
      <div>
        <div>
          <p>Incluso los componentes profundamente anidados se traducen en contexto.</p>
          <button>¡Haz clic aquí!</button>
        </div>
      </div>
    </T>
  )
}

Cualquier cosa que esté envuelta en el componente <T> se puede traducir. La herramienta de configuración de la CLI usa un parser de Babel personalizado para escanear nuestro códigobase y envuelve automáticamente con un <T> cualquier componente de React que encuentre.

Usar el componente <T> tiene varias ventajas frente a otras bibliotecas:

• Nunca tendrás que lidiar con diccionarios ni gestionar claves.
• Las traducciones están siempre actualizadas y se mantienen sincronizadas con el código.
• Las traducciones incluyen automáticamente toda la información contextual que las rodea, lo que permite obtener mejores resultados de traducción.

Ejecutar el chatbot

Por supuesto, no podía olvidarme de incluir todas las variables de entorno.

cp .env.example .env.local

Tuve que crear una cuenta gratuita en el dashboard de General Translation para obtener una clave de API. Solo hicieron falta unos pocos clics.

Después de definir todas las variables de entorno requeridas, ejecuté el chatbot:

npm run dev

¡Eso fue todo! Cambié el idioma de mi navegador a francés y la interfaz cambió a francés. Lo mismo con español y chino.

Sencillo, ¿verdad?

Lo hice aún más fácil añadiendo un selector de idioma en el encabezado del chatbot.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... código existente ... */}
    <LocaleSelector />
    {/* ... código existente ... */}
  );
}

Funcionó de inmediato.

Limpieza

Aunque la herramienta de configuración de la CLI hizo un buen trabajo al traducir todos los elementos de React, quedaron algunas cadenas molestas que estaban codificadas de forma rígida.

Por ejemplo, el archivo model-selector.tsx tenía algunas descripciones codificadas de forma rígida de los modelos de chat:

{
  id: 'chat-model-large',
  name: 'Modelo grande',
  description: 'Modelo grande para tareas complejas de varios pasos',
},

Reorganicé esto importando el hook useGT desde gt-next/client y usándolo para traducir las cadenas:

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('Modelo grande'),
  description: t('Modelo grande para tareas complejas de varios pasos'),
},

¡Listo! Todo el texto del chatbot ya estaba internacionalizado y disponible en cualquier idioma.

Despliegue en producción

El despliegue en producción fue aún más sencillo. Reemplacé mi variable de entorno GT_API_KEY por una clave de API de producción y ejecuté el comando de traducción:

npx gt-next-cli translate --locales es fr zh

Por último, implementé el chatbot en Vercel.

Conclusión

La experiencia de internacionalizar el chatbot fue muy sencilla. No tuve que tocar archivos de configuración, diccionarios ni configuraciones de rutas complejas.

En cuestión de minutos, tenía un chatbot de IA totalmente funcional e internacionalizado, disponible en español, francés y chino.

Si te interesa el código, lo puedes encontrar aquí.

Si te interesa usar General Translation, visita el sitio web, el repositorio de GitHub o la documentación.