Ajouter la traduction dans Next.js avec Next International

Avec plus de 4,6 milliards d'internautes dans le monde, proposer votre contenu dans plusieurs langues peut multiplier votre audience par 3. Next International est la solution la plus simple pour transformer votre site Next.js en plateforme multilingue, sans complexité technique excessive.

Ce que vous allez accomplir :

• Installer Next International en 2 minutes
• Configurer français et anglais (extensible à d'autres langues)
• Détecter automatiquement la langue des visiteurs
• Avoir un site prêt pour un public international

1. Créer votre projet

Créons un nouveau projet Next.js avec TypeScript (recommandé pour une meilleure expérience de développement).

1pnpm create next-app@latest my-app --yes
2cd my-app

Astuce : Utilisez pnpm pour des installations plus rapides, ou remplacez par npm ou yarn selon vos préférences.

2. Installer Next International

Ajoutons Next International à notre projet. Cette librairie est légère (moins de 50KB) et optimisée pour Next.js 13+.

1pnpm install next-international

Pourquoi Next International ?

• Plus simple que react-i18next
• Optimisé pour App Router de Next.js
• Support TypeScript natif
• Détection automatique de la langue

3. Configurer les fichiers de traduction

Créons la structure de fichiers pour gérer nos traductions. Nous allons organiser tout dans un dossier src/locale/ pour une meilleure lisibilité.

3.1 Structure des dossiers

Créer le dossier : src/locale/

1[object Object]

3.2 Configuration côté client

Créer le fichier : src/locale/client.ts

Explication : Ce fichier configure Next International pour le côté client (composants interactifs, hooks, etc.)

1// locales/client.ts
2"use client"
3import { createI18nClient } from 'next-international/client'
4 
5export const { 
6  useI18n, 
7  useScopedI18n, 
8  I18nProviderClient,
9  useCurrentLocale,
10  useChangeLocale,
11} = createI18nClient({
12  en: () => import('./en'),
13  fr: () => import('./fr')
14})
15 
16export type Locale = 'en' | 'fr'

3.3 Configuration côté serveur

Créer le fichier : src/locale/server.ts

Explication : Ce fichier configure Next International pour le côté serveur (Server Components, génération statique, etc.)

1// locales/server.ts
2import { createI18nServer } from 'next-international/server'
3 
4export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer({
5  en: () => import('./en'),
6  fr: () => import('./fr')
7})

3.4 Créer les fichiers de traduction

Créer les dossiers et fichiers : src/locale/en/index.ts et src/locale/fr/index.ts

Explication : Ces fichiers contiennent vos traductions. Chaque clé correspond à un texte à traduire. Vous pouvez organiser vos traductions par sections (ex: 'header.title', 'footer.copyright').

1// locales/en.ts
2export default {
3    'hello': 'Hello',
4    'hello.world': 'Hello world!',
5    'welcome': 'Hello {name}!'
6  } as const

et

1// locales/fr.ts
2export default {
3  'hello': 'Bonjour',
4  'hello.world': 'Bonjour tout le monde!',
5  'welcome': 'Bonjour {name}!'
6} as const

3.5 Intégrer le Provider dans le Layout

Modifier le fichier : app/layout.tsx

Créer le dossier src/[locale] pour déplacer tous les fichiers dans celui-ci

1[object Object]

Explication : Le Provider enveloppe toute votre application pour rendre les traductions disponibles partout. Il détecte automatiquement la langue de l'utilisateur.

1import type { Metadata } from "next";
2import { Geist, Geist_Mono } from "next/font/google";
3import "./globals.css";
4import { I18nProviderClient } from "@/locale/client";
5 
6const geistSans = Geist({
7  variable: "--font-geist-sans",
8  subsets: ["latin"],
9});
10 
11const geistMono = Geist_Mono({
12  variable: "--font-geist-mono",
13  subsets: ["latin"],
14});
15 
16export const metadata: Metadata = {
17  title: "Create Next App",
18  description: "Generated by create next app",
19};
20 
21export default async function RootLayout({
22  children,
23  params,
24}: Readonly<{
25  children: React.ReactNode;
26  params: Promise<{ locale: string }>;
27}>) {
28  const { locale } = await params
29  return (
30    <html lang={locale}>
31      <body
32        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
33      >
34        <I18nProviderClient locale={locale}>
35        {children}
36        </I18nProviderClient>
37      </body>
38    </html>
39  );
40}

3.6 Configurer le Middleware

Créer le fichier : src/middleware.ts

Explication : Le middleware intercepte les requêtes pour détecter la langue préférée de l'utilisateur et rediriger vers la bonne version linguistique de votre site.

1// middleware.ts
2import { createI18nMiddleware } from 'next-international/middleware'
3import { NextRequest } from 'next/server'
4 
5const I18nMiddleware = createI18nMiddleware({
6  locales: ['en', 'fr'],
7  defaultLocale: 'en'
8})
9 
10export function middleware(request: NextRequest) {
11  return I18nMiddleware(request)
12}
13 
14export const config = {
15  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)']
16}

4. Utiliser la traduction dans vos composants

Maintenant que tout est configuré, utilisons les traductions dans nos composants !

4.1 Utilisation côté client

Modifier le fichier : app/page.tsx

Explication : Le hook useI18n() vous donne accès à la fonction de traduction t(). Passez simplement la clé de traduction pour obtenir le texte dans la langue active.

1"use client";
2 
3import { useI18n } from "@/locale/client";
4 
5export default function Home() {
6  const t = useI18n();
7  return (
8    <div className="flex flex-col items-center justify-center h-screen">
9      <p>{t("hello")}</p>
10    </div>
11  );
12}

5. Fonctionnalités avancées

5.1 Traductions avec variables

Vous pouvez inclure des variables dans vos traductions :

1// Dans vos fichiers de traduction
2'welcome': 'Bonjour {name}!',  // fr
3'welcome': 'Hello {name}!',    // en
4 
5// Dans votre composant
6<p>{t('welcome', { name: 'Marie' })}</p>
7// Affiche : "Bonjour Marie!" ou "Hello Marie!"

5.2 Utilisation côté serveur

Pour les Server Components, utilisez getI18n() :

1import { getI18n } from '@/locale/server';
2 
3export default async function ServerComponent() {
4  const t = await getI18n();
5  return <h1>{t('hello')}</h1>;
6}

5.3 Changer de langue dynamiquement

1import { useCurrentLocale, useChangeLocale, Locale } from '@/locale/client';
2 
3export default function LanguageSwitcher() {
4  const locale = useCurrentLocale();
5  const changeLocale = useChangeLocale();
6  
7  return (
8    <select value={locale} onChange={(e) => changeLocale(e.target.value as Locale)}>
9      <option value="fr">Français</option>  
10      <option value="en">English</option>
11    </select>
12  );
13}

6. Vérification et tests

Testez votre configuration :

1. Démarrez votre serveur : pnpm dev
2. Visitez : http://localhost:3000
3. Changez la langue : http://localhost:3000/fr ou http://localhost:3000/en
4. Vérifiez : Les textes changent selon la langue

7. Félicitations !

Votre site Next.js est maintenant multilingue !

Prochaines étapes :

• Ajoutez plus de traductions dans vos fichiers de langue
• Organisez vos traductions par sections (header, footer, etc.)
• Testez sur différents navigateurs et appareils
• Considérez l'ajout d'autres langues (espagnol, allemand, etc.)

Ressources utiles :

• Documentation Next International
• Outils de traduction recommandés