Intro

Qualche giorno fa mi sono imbattuto in un template di chatbot AI per Next.js su Vercel. Con mia sorpresa, era disponibile solo in inglese.

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

Dai un'occhiata qui.

Dai un'occhiata al codice qui.

Perché internazionalizzare?

Spesso gli sviluppatori sono così concentrati sullo sviluppo del prodotto che si dimenticano degli utenti. Per app come i chatbot AI, che sono intrinsecamente multilingue e progettati per essere usati da chiunque, a cosa serve un chatbot che supporta solo l'inglese?

La maggior parte delle persone nel mondo non parla nemmeno inglese. Infatti, 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?

C'è un motivo se la maggior parte dei prodotti è disponibile solo in inglese: internazionalizzare è difficile.

Le librerie esistenti come next-intl o next-i18next sono una seccatura da configurare e usare. Non solo, ma non si occupano nemmeno delle traduzioni. Devi comunque assumere traduttori, gestire dizionari con centinaia di chiavi e affrontare tutti gli altri problemi tipici dell'internazionalizzazione. Anche modifiche minime al testo possono richiedere ore, se non giorni, per essere tradotte.

Fino ad ora.

Ho lavorato a una nuova libreria chiamata gt-next che rende semplice internazionalizzare la tua app in pochi minuti. È un unico punto di riferimento per tutte le tue esigenze di internazionalizzazione, incluse traduzioni, routing e altro ancora.

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

Installazione

Ho iniziato effettuando il fork e la clonazione del repository:

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

Poi ho installato le dipendenze:

npm install

Se anche tu ti imbatti in conflitti di dipendenze come è successo a me, prova a usare questo branch.

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

Successivamente ho installato i pacchetti gt-next e gt-next-cli.

npm install gt-next gt-next-cli

Configurazione

Poi ho eseguito lo strumento di configurazione della CLI e selezionato "Yes" per ogni domanda:

npx gt-next-cli setup

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

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // francese, spagnolo, cinese
})

Avrei potuto aggiungere più locali, ma volevo solo testare il chatbot con alcune lingue diverse. Sentiti libero di aggiungere tutti i locali che vuoi!

Qui trovi un elenco di tutti quelli supportati da gt-next.

Come funziona

Il cuore della libreria è il componente <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>Puoi scrivere qualsiasi JSX come children del componente {'<T>'}.</p>
      <p>
        Ad esempio, puoi scrivere un <a href="/">link</a>
        e far tradurre il testo in base al contesto.
      </p>
      <div>
        <div>
          <p>Anche i componenti profondamente annidati vengono tradotti in base al contesto.</p>
          <button>Cliccami!</button>
        </div>
      </div>
    </T>
  )
}

Qualsiasi elemento racchiuso nel componente <T> può essere tradotto. Lo strumento di setup della CLI utilizza un parser babel personalizzato per analizzare la nostra codebase e wrappa automaticamente con <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 mantenute sincronizzate con il codice.
• Le traduzioni includono automaticamente tutte le informazioni di contesto circostanti, permettendo risultati migliori.

Esecuzione del chatbot

Ovviamente 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 impostato tutte le variabili d'ambiente richieste, ho eseguito il chatbot:

npm run dev

Ed ecco fatto! Ho cambiato la lingua del browser in francese e l'interfaccia utente è passata al francese. Stessa cosa per lo spagnolo e il cinese.

Semplice, no?

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

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

Ha funzionato subito, senza bisogno di configurazione.

Pulizia

Anche se lo strumento di setup della CLI ha fatto un buon lavoro nel tradurre tutti gli elementi React, c'erano alcune stringhe fastidiose che erano hardcoded.

Ad esempio, il file model-selector.tsx conteneva alcune descrizioni hardcoded dei modelli di chat:

{
  id: 'chat-model-large',
  name: 'Modello Large',
  description: 'Modello Large per attività complesse e articolate',
},

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

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('Modello grande'),
  description: t('Modello grande per attività complesse a più fasi'),
},

Ecco fatto! Tutto il testo del chatbot era ora internazionalizzato e disponibile in qualsiasi lingua.

Distribuzione in produzione

Il rilascio in produzione è stato ancora più semplice. Ho sostituito la variabile d'ambiente GT_API_KEY con una chiave API di produzione ed eseguito il comando di traduzione:

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

Infine, ho effettuato il deploy del chatbot su Vercel.

Conclusione

L'esperienza di internazionalizzare il chatbot è stata semplicissima. Non ho dovuto mettere mano a file di configurazione, dizionari o a complessi sistemi di routing.

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

Se ti interessa il codice, lo trovi qui.

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