La meilleure solution d'internationalisation (i18n) pour les applications Next.js

Comment ça marche

À mesure que le monde se globalise, il devient de plus en plus important pour les développeurs web de créer des applications capables de s'adapter aux utilisateurs issus 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 verrons comment ajouter l'internationalisation à votre application React Next.js, avec rendu côté serveur. TL;DR: Voir 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 implémenter l'internationalisation dans votre application Next.js, nous allons d'abord choisir une bibliothèque i18n. Il existe plusieurs bibliothèques populaires, notamment next-intl. Cependant, dans cet exemple, nous utiliserons TacoTranslate.

TacoTranslate traduit automatiquement vos chaînes dans n'importe quelle langue grâce à 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 votre compte ici. C'est gratuit et aucune carte de crédit n'est requise.

Dans l'interface de l'application TacoTranslate, créez un projet et rendez-vous dans l'onglet des clés API. Créez une clé read et une clé read/write. Nous les enregistrerons comme 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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE : Le code de la locale par défaut. 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. 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 indiquées précédemment. Par exemple, créez un fichier nommé /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 prochainement.

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 fournisseur 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 : Implémentation 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 bref affichage de contenu non traduit au départ. De plus, nous pouvons éviter les requêtes réseau côté client, car nous disposons déjà de toutes les traductions nécessaires.

Commençons 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 rendra la clé API publique accessible. 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 afin de s'assurer que les nouvelles chaînes sont envoyées pour traduction.

Jusqu'à présent, nous avons uniquement configuré l’application Next.js avec une liste de langues prises en charge. Ensuite, nous allons récupérer les traductions de toutes vos pages. Pour ce faire, vous utiliserez soit getTacoTranslateStaticProps soit getTacoTranslateServerSideProps, selon vos besoins.

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

Pour utiliser l'une ou l'autre fonction dans une page, supposons que vous ayez un fichier de page comme /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 des chaînes 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 fait ! Votre application Next.js sera désormais traduite automatiquement lorsque vous ajouterez des chaînes dans 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 pourrez tester votre application de production avec une clé API de ce type, en ajoutant de nouvelles chaînes avant la mise en production. Cela empêchera quiconque de voler votre clé API secrète et d’éventuellement gonfler votre projet de traduction en ajoutant de nouvelles chaînes non pertinentes.

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!