​
Prerequisiti

Quetzal può essere utilizzato per tradurre Next.js che usa il framework next-intl.

​
Installazione di Quetzal

Installa
npm install --save @quetzallabs/i18n-next @quetzallabs/i18n-core

​
Configurazione

Dopo l’installazione del pacchetto, è necessaria una configurazione aggiuntiva.

1

Esegui script di configurazione

Esegui npx quetzal-setup nella directory in cui hai installato il pacchetto Quetzal

2

Imposta Chiave API

Imposta la variabile d’ambiente QUETZAL_API_KEY con la tua Chiave API Quetzal. La tua Chiave API si trova nella tua dashboard del progetto

3

Aggiorna quetzal.config.json

Lo script di configurazione dovrebbe averlo creato per te. Aggiorna paths in modo che punti alle directory con il codice che intendi localizzare. Aggiorna parser a i18next-parser

Esempio quetzal.config.json
{
"paths": ["src/**/*.{js,tsx}"],
"parser": "i18next-parser"
}
4

Configura il provider next-intl

Quetzal utilizza il pacchetto next-intl per inserire le traduzioni nella tua app, quindi la tua app deve utilizzare il NextIntlClientProvider

Apparirà più o meno così:


import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";

const messages = await getMessages();

...

return (

<html>
    <body>
        <NextIntlClientProvider messages={messages}>
            {children}
        </NextIntlClientProvider>
    </body>
</html>

);

Ulteriori dettagli su questo provider sono disponibili nella documentazione di next-intl.

5

Configura il plugin next-intl

La tua app deve anche aggiungere il NextIntlPlugin da next-intl nel tuo file next.config.

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Ulteriori dettagli su questo plugin sono disponibili nella documentazione di next-intl.

​
E hai finito!

La configurazione dovrebbe essere completata, e puoi iniziare a tradurre la tua app.

​
Verifica la Tua Installazione

Esegui npx quetzal-process-translations per testare la tua installazione.

Se il tuo output è simile a quello sopra, allora Quetzal è stato installato correttamente e la tua app inizierà a supportare altre lingue!

In caso di errori, si spera che il problema sia chiaro e risolvibile. In caso contrario, contattaci e possiamo far funzionare la tua installazione.

Nota: Questo script fallirà se non hai contrassegnato alcun testo nella tua app per la traduzione. Quindi, potresti dover iniziare a tradurre la tua app prima

Quetzal è progettato per integrarsi perfettamente nel tuo processo di build. Quindi, questo script dovrebbe essere eseguito almeno ogni volta che viene effettuata una build, ma potrebbe essere eseguito con la frequenza desiderata.

Lo script di configurazione dovrebbe aver aggiunto npx quetzal-process-translations allo script pre-build nel package.json del tuo progetto, ma questo può essere modificato.

Dashboard ProgettoReact