La migliore soluzione per l'internazionalizzazione (i18n) nelle applicazioni Next.js

Come funziona

Man mano che il mondo diventa sempre più globalizzato, diventa sempre più importante per gli sviluppatori web creare applicazioni in grado di soddisfare utenti provenienti da diversi paesi e culture. Uno dei modi chiave per raggiungere questo obiettivo è tramite l'internazionalizzazione (i18n), che permette di adattare la tua 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 le applicazioni Next.js che utilizzano Pages Router.
Se stai usando invece App Router, consulta questa guida.

Passo 1: Installa una libreria i18n

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

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

Installiamolo usando npm nel tuo terminale:

npm install tacotranslate

Passo 2: Crea un account TacoTranslate gratuito

Ora che hai installato il modulo, è il momento di creare il tuo account TacoTranslate, un progetto di traduzione e le relative chiavi API. 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 chiavi API. Crea una chiave read e una chiave read/write. Le salveremo come variabili d'ambiente. La chiave read è quella che chiamiamo public, mentre la chiave read/write è secret. Per esempio, potresti aggiungerle a un file .env nella radice del tuo progetto.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Il codice della lingua predefinita di fallback. In questo esempio, lo imposteremo su en per l'inglese.
• TACOTRANSLATE_ORIGIN: La “cartella” dove saranno memorizzate 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

Passo 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 a breve TACOTRANSLATE_API_KEY.

Creare il client in un file separato rende più facile riutilizzarlo in seguito. Ora, utilizzando un /pages/_app.tsx personalizzato, 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à dei pageProps personalizzati e _app.tsx, estendi la definizione con le proprietà e il codice sopra indicati.

Passo 4: Implementazione del rendering lato server

TacoTranslate consente il rendering lato server delle tue traduzioni. Questo migliora notevolmente l'esperienza dell'utente mostrando immediatamente il contenuto tradotto, invece di un rapido lampeggio di contenuto non tradotto all'inizio. Inoltre, possiamo evitare richieste di rete sul 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 mostrerà la chiave API pubblica. Se ci troviamo in un ambiente locale, di test o di staging (isProduction is false), utilizzeremo la chiave API read/write segreta per assicurarci che le nuove stringhe vengano inviate per la traduzione.

Fino ad ora, abbiamo configurato l'applicazione Next.js solo con una lista di lingue supportate. Il prossimo passo sarà recuperare le traduzioni per tutte le tue pagine. Per farlo, utilizzerai o getTacoTranslateStaticProps o getTacoTranslateServerSideProps in base alle tue esigenze.

Queste funzioni accettano tre argomenti: un oggetto Next.js Static Props Context, la configurazione per TacoTranslate e proprietà opzionali di Next.js. Nota che revalidate su getTacoTranslateStaticProps è impostato di default a 60, così le tue traduzioni restano aggiornate.

Per usare una di queste funzioni in una pagina, supponiamo tu abbia un file di 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!"/>
}

Passaggio 5: Distribuisci e testa!

Abbiamo finito! La tua applicazione Next.js sarà ora tradotta automaticamente quando 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. Consigliamo di avere un ambiente di staging chiuso e sicuro dove poter 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.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!