Tutoriel : Créer un Site Multilingue avec Next.js et Next-intl

Dans un monde de plus en plus connecté, créer des sites et des applications multilingues est essentiel pour atteindre un public mondial. Next.js, en tant que framework basé sur React, offre des outils puissants pour faciliter ce processus. Ce tutoriel va vous guider pas à pas pour structurer un projet multilingue en utilisant Next.js avec la bibliothèque next-intl.

Pourquoi Choisir Next.js pour un site Multilingue ?

Rendu côté serveur (SSR) : Améliore le référencement SEO en générant le contenu sur le serveur.

Génération statique (SSG) : La génération de pages statiques pour chaque langue offre des performances optimales et un SEO amélioré.

Gestion facile des routes : La gestion du routage le routage se fait de manière intuitive. Vous pouvez créer des chemins spécifiques pour chaque langue, ce qui améliore l’expérience utilisateur et le SEO.

Prérequis

Avant de commencer, vous devez avoir Node.js et npm installés sur votre machine. Vous pouvez les télécharger depuis nodejs.org.

Étape 1 : Créer un projet Next.js

Créez le projet en utilisant Next.js :

npx create-next-app@latest multilingual

Lors de la configuration, choisissez d’installer Tailwind CSS pour une gestion flexible des styles.

Accédez au dossier du projet

cd multilingual

Démarrez le serveur de développement pour vous assurer que tout fonctionne correctement

npm run dev

Cela démarre votre application sur http://localhost:3000.

Étape 2 : Installer les dépendances nécessaires

Installez Next-intl pour gérer l’internationalisation :

npm install next-intl

Étape 3 : Structurer les Fichiers pour l’Internationalisation

Créez la structure de fichiers suivante :

├── messages
│   ├── en.json
│   └── fr.json
├── next.config.mjs
└── src
    ├── i18n
    │   ├── routing.js
    │   └── request.js
    ├── middleware.js
    └── app
        └── [locale]
            ├── layout.js
            └── page.js

[locale] : Ce dossier dynamique représentera les langues (comme en pour l’anglais, fr pour le français, etc.).

messages : Ce dossier contient les fichiers de traduction pour chaque langue, comme en.json pour l’anglais et fr.json pour le français.

Étape 4 : Configurer les traductions

Voici un exemple de fichier en.json dans le dossier messages:

{
  "HomePage": {
    "title": "Welcome to My Site",
    "subtitle": "We create amazing things!",
    "website":"My Website"
  }
}

Et le fichier fr.json correspondant :

{
  "HomePage": {
    "title": "Bienvenue sur mon site",
    "subtitle": "Nous créons des choses incroyables!",
        "website":"Mon Site"
  }
}

Étape 5 : Configurer next.config.mjs pour l’Internationalisation

Ajoutez la configuration suivante dans next.config.mjs pour intégrer next-intl

import createNextIntlPlugin from 'next-intl/plugin';

/** @type {import('next').NextConfig} */
const nextConfig = {};

const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);

Étape 6 : Configurer le Routage

Dans src/i18n/routing.js configurez la navigation en ajoutant les langues supportées :

import { defineRouting } from 'next-intl/routing';
import { createNavigation } from 'next-intl/navigation';

export const routing = defineRouting({
  locales: ['en', 'fr'], 
  defaultLocale: 'en', 
});


export const { Link, redirect, usePathname, useRouter } =
  createNavigation(routing);

Étape 7 : Configurer le Middleware

Dans src/middleware.js, configurez le middleware pour gérer les redirections en fonction de la langue :

import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);

export const config = {

  matcher: ['/', '/(fr|en)/:path*'],
};

Étape 8 : Configurer les Requêtes Côté Serveur

Créez src/i18n/request.js :

import { getRequestConfig } from 'next-intl/server';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {

  let locale = await requestLocale;

  
  if (!locale || !routing.locales.includes(locale)) {
    locale = routing.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

Étape 9 : Ajouter un Composant Navbar

Ajoutez un composant Navbar et un Sélecteur de langue pour permettre à l’utilisateur de changer la langue de l’application :

'use client';

import React, { useState, useEffect } from 'react';
import { Link } from '@/i18n/routing';
import { usePathname } from '@/i18n/routing';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';

const Navbar = ({ locale }) => {
  const pathname = usePathname();
  const router = useRouter();
  const t = useTranslations('HomePage');
  

  const [selectedLocale, setSelectedLocale] = useState(() => {
  
    if (typeof window !== "undefined") {
      return localStorage.getItem('locale') || locale;
    }
    return locale;
  });

  useEffect(() => {
    setSelectedLocale(locale); 
  }, [locale]);

  const handleLanguageChange = (event) => {
    const newLocale = event.target.value;
    setSelectedLocale(newLocale); 
    localStorage.setItem('locale', newLocale); 
    router.push(`/${newLocale}${pathname}`); 
  };

  return (
    <nav className="flex justify-between items-center p-4 bg-white shadow-md">
      <Link href="/" className="text-xl font-semibold">{t('website')}</Link>

      <select 
        onChange={handleLanguageChange} 
        value={selectedLocale} 
        className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <option value="en">🇬🇧 English</option>
        <option value="fr">🇫🇷 Français</option>
      </select>
    </nav>
  );
};

export default Navbar;

Étape 10 : Ajouter un Composant Hero

Ajoutez un composant Hero dans src/components/Hero.js. Pour afficher les textes traduits , importez la fonction useTranslations depuis le module next-intl en utilisant : import { useTranslations } from ‘next-intl’;. Ensuite, vous pouvez récupérer les traductions en appelant const t = useTranslations(‘NomDesTrad’); où NomDesTrad fait référence à la clé du groupe de traductions défini dans votre fichier de traductions JSON que nous avons vu tout à l’heure. Par exemple, pour obtenir le titre de la page home, vous recuperez de useTranslations(‘HomePage’); et vous utilisez t(‘title’) pour afficher « accueil » en français et « home » en anglais.

// src/components/Hero.js
'use client';
import { useTranslations } from 'next-intl';

export default function Hero() {
  const t = useTranslations('HomePage');

  return (
    <section className="relative bg-blue-600 text-white h-96 flex flex-col justify-center items-center text-center">
      <h1 className="text-4xl font-bold mb-4">{t('title')}</h1>
      <p className="text-xl">{t('subtitle')}</p>
    </section>
  );
}

Étape 11 : Configurer le Layout

Dans src/app/[locale]/layout.js configurez le layout pour supporter l’internationalisation et faire passer la locale au Navbar. GenerateStaticParams() permet de créer automatiquement des versions statiques de vos pages pour chaque langue, améliorant ainsi la vitesse de chargement et le référencement SEO.

// src/app/[locale]/layout.js
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { routing } from '@/i18n/routing';
import { setRequestLocale } from 'next-intl/server';
import Navbar from '@/components/Navbar';
import "../globals.css";

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({ children, params }) {
 
  const { locale } = await params;  

  if (!routing.locales.includes(locale)) {
    notFound();
  }

setRequestLocale(locale);

  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          <Navbar locale={locale} />
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Étape 12 :

Dans src/app/[locale] /page.js utilisez le composant Hero:

// src/app/[locale]/page.js
import Hero from '@/components/Hero'; 

export default function HomePage() {
  return (
    <div>
      <Hero /> 
    </div>
  );
}

Conclusion

Félicitations ! Vous avez maintenant un site Next.js multilingue fonctionnel, utilisant next-intl pour gérer la traduction et l’internationalisation. Vous pouvez facilement ajouter plus de langues, de pages et de composants au fur et à mesure de vos besoins. Le code source de ce projet est disponible sur mon GitHub : next-i18n-starter.