Come implementare l'internazionalizzazione in un'applicazione Next.js che utilizza Pages Router

Man mano che il mondo diventa sempre più globalizzato, è sempre più importante per gli sviluppatori web creare applicazioni che possano soddisfare utenti provenienti da diversi paesi e culture. Uno dei modi principali per raggiungere questo obiettivo è l’internazionalizzazione (i18n), che permette di adattare l’applicazione a diverse lingue, valute e formati di data.

In questo tutorial, esploreremo come aggiungere l’internazionalizzazione alla tua applicazione React Next.js, con rendering lato server. TL;DR: Vedi l’esempio completo qui.

Questa guida è per applicazioni Next.js che utilizzano il Pages Router.
Se stai utilizzando il App Router, consulta invece questa guida.

Step 1: Installa una libreria i18n

Per implementare l'internazionalizzazione nella tua applicazione Next.js, sceglieremo prima una libreria i18n. Ci sono diverse librerie popolari, tra cui next-intl. Tuttavia, in questo esempio, useremo TacoTranslate.

TacoTranslate traduce automaticamente le tue stringhe in qualsiasi lingua utilizzando un'IA all'avanguardia e ti libera dalla gestione noiosa dei file JSON.

Installiamolo usando npm nel tuo terminale:

npm install tacotranslate

Passaggio 2: Crea un account gratuito su TacoTranslate

Ora che hai installato il modulo, è il momento di creare il tuo account TacoTranslate, un progetto di traduzione e le chiavi API associate. Crea un account qui. È gratuito e non richiede l’aggiunta di una carta di credito.

All'interno dell'interfaccia utente dell'applicazione TacoTranslate, crea un progetto e vai alla scheda delle API key. Crea una key read e una key read/write. Le salveremo come variabili d'ambiente. La key read è quella che chiamiamo public e la key read/write è secret. Ad esempio, potresti aggiungerle a un file .env nella root del tuo progetto.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Assicurati di non divulgare mai la chiave API segreta read/write negli ambienti di produzione lato client.

Aggiungeremo anche altre due variabili d'ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della localizzazione predefinita di fallback. In questo esempio, lo imposteremo su en per l’inglese.
• TACOTRANSLATE_ORIGIN: La “cartella” dove verranno archiviate le tue stringhe, come l’URL del tuo sito web. Leggi di più sulle origini qui.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Passaggio 3: Configurazione di TacoTranslate

Per integrare TacoTranslate con la tua applicazione, dovrai creare un client utilizzando le chiavi API menzionate in precedenza. Ad esempio, crea un file chiamato /tacotranslate-client.js.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY ??
		'',
	projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Definiremo automaticamente TACOTRANSLATE_API_KEY a breve.

Creare il client in un file separato rende più facile riutilizzarlo in seguito. Ora, usando un custom /pages/_app.tsx, aggiungeremo il provider TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Se hai già pageProps e _app.tsx personalizzati, ti preghiamo di estendere la definizione con le proprietà e il codice qui sopra.

Passaggio 4: Implementazione del rendering sul lato server

TacoTranslate permette il rendering lato server delle tue traduzioni. Questo migliora notevolmente l'esperienza utente mostrando immediatamente il contenuto tradotto, invece di un breve lampeggio di contenuto non tradotto. Inoltre, possiamo evitare richieste di rete dal client, perché abbiamo già tutte le traduzioni di cui abbiamo bisogno.

Inizieremo creando o modificando /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		client: tacoTranslateClient,
		isProduction:
			process.env.TACOTRANSLATE_ENV === 'production' ||
			process.env.VERCEL_ENV === 'production' ||
			(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
				process.env.NODE_ENV === 'production'),
	});
};

Modifica il controllo isProduction in base alla tua configurazione. Se true, TacoTranslate utilizzerà la chiave API pubblica. Se siamo in un ambiente locale, di test o di staging (isProduction is false), useremo la chiave API segreta read/write per assicurarci che nuove stringhe vengano inviate per la traduzione.

Fino ad ora, abbiamo configurato l'applicazione Next.js solo con un elenco di lingue supportate. La prossima cosa che faremo è recuperare le traduzioni per tutte le tue pagine. Per farlo, utilizzerai getTacoTranslateStaticProps o getTacoTranslateServerSideProps in base alle tue esigenze.

Queste funzioni prendono tre argomenti: un oggetto Next.js Static Props Context, la configurazione per TacoTranslate e proprietà opzionali di Next.js. Nota che il valore di revalidate su getTacoTranslateStaticProps è impostato a 60 per default, in modo che le tue traduzioni rimangano aggiornate.

Per usare una delle due funzioni in una pagina, supponiamo che tu abbia un file pagina come /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Ora dovresti essere in grado di utilizzare il componente Translate per tradurre le stringhe all'interno di tutti i tuoi componenti React.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Passo 5: Distribuisci e testa!

Abbiamo finito! La tua applicazione React ora verrà tradotta automaticamente ogni volta che aggiungi qualsiasi stringa a un componente Translate. Nota che solo gli ambienti con permessi read/write sulla chiave API potranno creare nuove stringhe da tradurre. Ti consigliamo di avere un ambiente di staging chiuso e sicuro dove puoi testare la tua applicazione di produzione con una chiave API di questo tipo, aggiungendo nuove stringhe prima di andare in produzione. Questo impedirà a chiunque di rubare la tua chiave API segreta e potenzialmente di gonfiare il tuo progetto di traduzione aggiungendo nuove stringhe non correlate.

Assicurati di dare un’occhiata all’esempio completo sul nostro profilo GitHub. Lì troverai anche un esempio di come farlo utilizzando App Router ! Se riscontri problemi, non esitare a contattarci, saremo più che felici di aiutarti.

TacoTranslate ti permette di localizzare automaticamente le tue applicazioni React rapidamente in qualsiasi lingua e da qualsiasi lingua. Inizia oggi stesso!