Comment mettre en œuvre l'internationalisation dans une application Next.js qui utilise le Pages Router

À mesure que le monde devient plus globalisé, il est de plus en plus important pour les développeurs web de créer des applications qui peuvent répondre aux utilisateurs de différents pays et cultures. L'une des principales façons d'y parvenir est l'internationalisation (i18n), qui vous permet d'adapter votre application à différentes langues, devises et formats de date.

Dans ce tutoriel, nous allons explorer comment ajouter l'internationalisation à votre application React Next.js, avec le rendu côté serveur. TL;DR: Voyez l'exemple complet ici.

Ce guide s'adresse aux applications Next.js qui utilisent le Pages Router.
Si vous utilisez le App Router, veuillez consulter ce guide à la place.

Étape 1 : Installer une bibliothèque i18n

Pour mettre en œuvre l'internationalisation dans votre application Next.js, nous allons d'abord choisir une bibliothèque i18n. Il existe plusieurs bibliothèques populaires, y compris next-intl. Cependant, dans cet exemple, nous allons utiliser TacoTranslate.

TacoTranslate traduit automatiquement vos chaînes dans n'importe quelle langue en utilisant une IA de pointe et vous libère de la gestion fastidieuse des fichiers JSON.

Installons-le en utilisant npm dans votre terminal :

npm install tacotranslate

Étape 2 : Créez un compte TacoTranslate gratuit

Maintenant que vous avez installé le module, il est temps de créer votre compte TacoTranslate, un projet de traduction et les clés API associées. Créez un compte ici. C'est gratuit et ne nécessite pas que vous ajoutiez une carte de crédit.

Dans l'interface de l'application TacoTranslate, créez un projet et naviguez vers l'onglet des clés API. Créez une clé read et une clé read/write. Nous les enregistrerons en tant que variables d'environnement. La clé read est ce que nous appelons public et la clé read/write est secret. Par exemple, vous pourriez les ajouter à un fichier .env à la racine de votre projet.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Assurez-vous de ne jamais révéler la clé API secrète read/write dans les environnements de production côté client.

Nous ajouterons également deux autres variables d'environnement : TACOTRANSLATE_DEFAULT_LOCALE et TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Le code de locale de secours par défaut. Dans cet exemple, nous allons le définir sur en pour l'anglais.
• TACOTRANSLATE_ORIGIN: Le “dossier” où vos chaînes seront stockées, comme l'URL de votre site Web. En savoir plus sur les origines ici.

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

Étape 3 : Configuration de TacoTranslate

Pour intégrer TacoTranslate à votre application, vous devrez créer un client en utilisant les clés API mentionnées précédemment. Par exemple, créez un fichier nommé /utilities/tacotranslate.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;

Nous allons définir automatiquement TACOTRANSLATE_API_KEY sous peu.

Créer le client dans un fichier séparé le rend plus facile à réutiliser plus tard. Maintenant, en utilisant un /pages/_app.tsx, nous ajouterons le TacoTranslate fournisseur.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import tacoTranslate from '../utilities/tacotranslate';

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

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

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Si vous avez déjà des pageProps et _app.tsx, veuillez étendre la définition avec les propriétés et le code ci-dessus.

Étape 4 : Mise en œuvre du rendu côté serveur

TacoTranslate permet le rendu côté serveur de vos traductions. Cela améliore considérablement l'expérience utilisateur en affichant immédiatement le contenu traduit, au lieu d'un flash de contenu non traduit au préalable. De plus, nous pouvons éviter les requêtes réseau côté client, car nous avons déjà toutes les traductions nécessaires.

Nous allons commencer par créer ou modifier /next.config.js.

const tacoTranslate = require('./utilities/tacotranslate');

module.exports = async () => {
	const locales = await tacoTranslate.getLocales();
	const isProduction =
		process.env.TACOTRANSLATE_ENV === 'production' ||
		process.env.VERCEL_ENV === 'production' ||
		(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
			process.env.NODE_ENV === 'production');

	const [projectLocale] = locales;

	return {
		env: {
			TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
			TACOTRANSLATE_API_KEY: isProduction
				? process.env.TACOTRANSLATE_PUBLIC_API_KEY
				: process.env.TACOTRANSLATE_SECRET_API_KEY,
			TACOTRANSLATE_DEFAULT_LOCALE: isProduction ? projectLocale : undefined,
		},
		i18n: {
			defaultLocale: projectLocale,
			locales,
		},
	};
};

Il y a quelques points à noter ici. Tout d'abord, nous récupérons toutes les langues que vous avez activées pour votre projet de traduction. La première chaîne dans le tableau de réponse est le code de locale que vous avez défini pour le projet.

Maintenant, passons à la partie cruciale : Décider si nous sommes ou non dans un environnement de production. Modifiez la vérification isProduction pour l'adapter à votre configuration. Si nous sommes dans un environnement local, de test ou de mise en scène, nous devrions utiliser la clé API secrète read/write pour nous assurer que les nouvelles chaînes sont envoyées pour traduction. Si nous sommes dans un environnement de production, nous devrions utiliser la clé publique read .

Jusqu'à présent, nous avons seulement configuré l'application Next.js avec une liste de langues prises en charge. La prochaine étape consistera à récupérer les traductions pour toutes vos pages. Tout d'abord, créez un nouveau fichier /utilities/custom-get-static-props.ts.

import {type GetStaticPropsContext} from 'next';
import {type Origin} from 'tacotranslate';
import tacoTranslate from './tacotranslate';

export default async function customGetStaticProps(
	{
		locale = process.env.TACOTRANSLATE_DEFAULT_LOCALE,
		locales,
	}: GetStaticPropsContext,
	additionalOrigins: Origin[] = []
) {
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const origins = [origin, ...additionalOrigins];
	const localizations = await tacoTranslate.getLocalizations({locale, origins});

	return {
		props: {locale, locales, localizations, origin},
		revalidate: 60,
	};
}

Cette fonction prend deux arguments : un objet Next.js Static Props Context et un tableau facultatif d'origines supplémentaires à partir desquelles récupérer des traductions, si vous en utilisez plus d'une dans votre application. Notez également la propriété revalidate dans l'instruction return, qui indique à Next.js de reconstruire la page après 60 secondes. Cela permettra de garder les traductions générées côté serveur à jour.

Pour utiliser cette fonction dans une page, supposons que vous avez un fichier de page comme /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import customGetStaticProps from '../utilities/custom-get-static-props';

export async function getStaticProps(context) {
	return customGetStaticProps(context);
}

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

Vous devriez maintenant être en mesure d'utiliser le Translate composant pour traduire des chaînes dans l'ensemble de vos composants React.

import {Translate} from 'tacotranslate/react';

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

Étape 5 : Déployez et testez !

Nous avons terminé ! Votre application React sera désormais traduite automatiquement lorsque vous ajouterez des chaînes à un Translate composant. Notez que seules les environnements ayant des read/write permissions sur la clé API pourront créer de nouvelles chaînes à traduire. Nous recommandons d'avoir un environnement de staging fermé et sécurisé où vous pouvez tester votre application de production avec une clé API de ce type, en ajoutant de nouvelles chaînes avant de passer en production. Cela empêchera quiconque de voler votre clé API secrète et pourra potentiellement éviter de gonfler votre projet de traduction en ajoutant de nouvelles chaînes non liées.

Assurez-vous de consulter l'exemple complet sur notre profil GitHub. Là, vous trouverez également un exemple de la façon de faire cela en utilisant le App Router! Si vous rencontrez des problèmes, n'hésitez pas à nous contacter, et nous serons plus qu’heureux de vous aider.

TacoTranslate vous permet de localiser automatiquement vos applications React rapidement vers et depuis n'importe quelle langue. Commencez dès aujourd'hui!