Introduzione

L'altro giorno mi sono imbattuto in un template di chatbot IA per Next.js su Vercel. Con sorpresa, era disponibile solo in inglese.

Così l'ho internazionalizzato. In 5 minuti. Ecco come:

Dagli un'occhiata qui.

Trovi il codice qui.

Perché internazionalizzare?

Spesso gli sviluppatori sono così concentrati sulla creazione del prodotto da dimenticarsi degli utenti. Per app come i chatbot IA, che sono intrinsecamente multilingue e pensati per essere usati da chiunque, che utilità ha un chatbot che supporta solo l'inglese?

La maggior parte delle persone nel mondo non parla nemmeno inglese. In effetti, solo circa il 20% lo parla. Se stai lavorando a una startup e il tuo prodotto è disponibile solo in inglese, non ti stai forse precludendo oltre l'80% dei potenziali clienti?

Il motivo per cui la maggior parte dei prodotti è disponibile solo in inglese c'è. È che l'internazionalizzazione è difficile.

Librerie esistenti come next-intl o next-i18next sono macchinose da configurare e usare. E non solo: non traducono nemmeno. Devi comunque assumere traduttori, gestire dizionari con centinaia di chiavi e affrontare tutti gli altri problemi dell'internazionalizzazione. Anche piccole modifiche al testo possono richiedere da ore a giorni per essere tradotte.

Fino a oggi.

Sto lavorando a una nuova libreria chiamata gt-next che ti permette di internazionalizzare la tua app in pochi minuti. È una soluzione completa per tutte le tue esigenze di internazionalizzazione, comprese traduzioni, routing e altro ancora.

Ho usato gt-next per internazionalizzare il chatbot IA di Vercel in 5 minuti.

Installazione

Per iniziare, ho effettuato un fork e clonato il repository:

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

Poi ho installato le dipendenze:

npm install

Se anche tu stai riscontrando conflitti di dipendenze, come è successo a me, prova a usare questo branch.

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

Poi ho installato i pacchetti gt-next e gt.

npm install gt-next gt

Configurazione

Poi, ho eseguito lo strumento di setup della CLI e ho risposto "Sì" a ogni domanda:

npx gt init

Dopodiché, ho aggiunto alcune impostazioni regionali al plugin next.config.js:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // Francese, Spagnolo, Cinese
})

Avrei potuto aggiungere più impostazioni regionali, ma volevo solo testare il chatbot con qualche lingua diversa. Aggiungi pure tutte le impostazioni regionali che vuoi!

Ecco l'elenco completo di quelle supportate da gt-next.

Come funziona

Il cuore della libreria è il componente <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

Qualsiasi elemento racchiuso nel componente <T> può essere tradotto. Lo strumento di setup della CLI usa un parser Babel personalizzato per analizzare il codebase e racchiude automaticamente in un <T> tutti i componenti React che trova.

L'uso del componente <T> offre diversi vantaggi rispetto ad altre librerie:

• Non dovrai mai gestire dizionari o chiavi.
• Le traduzioni sono sempre aggiornate e sincronizzate con il codice.
• Le traduzioni includono automaticamente tutte le informazioni di contesto, consentendo traduzioni migliori.

Avvio del chatbot

Naturalmente, non potevo dimenticare di includere tutte le variabili d'ambiente.

cp .env.example .env.local

Ho dovuto creare un account gratuito sulla dashboard di General Translation per ottenere una chiave API. Sono bastati pochi clic.

Dopo aver configurato tutte le variabili d'ambiente richieste, ho eseguito il chatbot:

npm run dev

Ecco fatto! Ho impostato la lingua del browser su francese e l'interfaccia è passata al francese. Lo stesso per lo spagnolo e il cinese.

Semplice, no?

Ho reso il cambio di lingua ancora più semplice aggiungendo un selettore della lingua nell'intestazione del chatbot.

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

Ha funzionato fin da subito.

Rifinitura

Sebbene lo strumento di setup della CLI abbia fatto un buon lavoro nel tradurre tutti gli elementi React, c'erano ancora alcune stringhe codificate direttamente nel codice.

Ad esempio, il file model-selector.tsx conteneva alcune descrizioni dei modelli di chat codificate direttamente nel codice:

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

Ho sistemato il tutto importando l'hook useGT da gt-next/client e usandolo per tradurre le stringhe:

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

Ecco fatto! Ora tutto il testo del chatbot è internazionalizzato e disponibile in qualsiasi lingua.

Deployment in produzione

Il deployment in produzione è stato ancora più semplice. Ho sostituito la variabile d'ambiente GT_API_KEY con una chiave API di produzione e ho eseguito il comando translate:

npx gt translate --locales es fr zh

Infine, ho effettuato il deployment del chatbot su Vercel.

Conclusione

Internazionalizzare il chatbot è stato semplicissimo. Non ho dovuto armeggiare con file di configurazione, dizionari o complessi sistemi di routing.

Nel giro di pochi minuti, avevo un chatbot IA completamente funzionante e internazionalizzato, disponibile in spagnolo, francese e cinese.

Se ti interessa il codice, puoi trovarlo qui.

Se ti interessa usare General Translation, dai un'occhiata al sito web, al repository su GitHub o alla documentazione.