Comment implémenter l'internationalisation dans une application Next.js utilisant le Pages Router

À mesure que le monde devient de plus en plus mondialisé, il est de plus en plus important pour les développeurs web de créer des applications capables de répondre aux besoins des utilisateurs de différents pays et cultures. L'une des principales manières 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: Voir l'exemple complet ici.

Ce guide est destiné aux applications Next.js utilisant le Pages Router.
Si vous utilisez le App Router, veuillez consulter plutôt ce guide.

Étape 1 : Installer une bibliothèque i18n

Pour implémenter l'internationalisation dans votre application Next.js, nous commencerons par choisir une bibliothèque i18n. Il existe plusieurs bibliothèques populaires, y compris next-intl. Cependant, dans cet exemple, nous utiliserons 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 d’ajouter une carte de crédit.

Dans l'interface utilisateur de l'application TacoTranslate, créez un projet, puis accédez à son 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 pouvez les ajouter à un fichier .env à la racine de votre projet.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Veillez à ne jamais divulguer 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 langue par défaut utilisé en cas de besoin. Dans cet exemple, nous le définirons 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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;

Nous définirons automatiquement TACOTRANSLATE_API_KEY sous peu.

Créer le client dans un fichier séparé facilite sa réutilisation ultérieure. Maintenant, en utilisant un /pages/_app.tsx personnalisé, nous allons ajouter le 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>
	);
}

Si vous avez déjà des pageProps et _app.tsx personnalisés, 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 disposons déjà de toutes les traductions nécessaires.

Nous allons commencer par créer ou modifier /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'),
	});
};

Modifiez la vérification isProduction pour l’adapter à votre configuration. Si true, TacoTranslate affichera la clé API publique. Si nous sommes dans un environnement local, de test ou de préproduction (isProduction is false), nous utiliserons la clé API secrète read/write pour nous assurer que les nouvelles chaînes sont envoyées pour traduction.

Jusqu’à présent, nous n’avons configuré l’application Next.js qu’avec une liste de langues prises en charge. La prochaine chose que nous allons faire est de récupérer les traductions de toutes vos pages. Pour ce faire, vous utiliserez getTacoTranslateStaticProps ou getTacoTranslateServerSideProps en fonction de vos besoins.

Ces fonctions prennent trois arguments : un objet Next.js Static Props Context , la configuration pour TacoTranslate et les propriétés Next.js facultatives. Notez que revalidate sur getTacoTranslateStaticProps est défini sur 60 par défaut, afin que vos traductions restent à jour.

Pour utiliser l’une ou l’autre fonction d’une page, supposons que vous disposez d’un fichier d’échange tel que /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!"/>;
}

Vous devriez maintenant pouvoir utiliser le composant Translate pour traduire les chaînes de caractères dans tous vos composants React.

import {Translate} from 'tacotranslate/react';

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

Étape 5 : Déployer et tester !

C'est terminé ! Votre application React sera désormais traduite automatiquement lorsque vous ajoutez des chaînes à un composant Translate. Notez que seuls les environnements disposant des permissions read/write 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 en production avec une clé API de ce type, en ajoutant de nouvelles chaînes avant la mise en ligne. Cela empêchera quiconque de voler votre clé API secrète, et de potentiellement alourdir votre projet de traduction en ajoutant de nouvelles chaînes non liées.

Assurez-vous de consulter l'exemple complet sur notre profil GitHub. Vous y 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, nous serons ravis 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 !