Internationalisation améliorée (i18n) dans Next.js 14 —

Dans cet article, nous verrons pourquoi internationalisation (i18n) est crucial pour le développement Web, explorez Next.js 14 de nouvelles fonctionnalités et apprenez à créer des expériences Web multilingues sans effort.

Imaginez que vous atterrissez sur un site Web où vous devez extraire une information importante et que vous vous heurtez soudainement à une barrière linguistique. Frustrant, non ? C’est là qu’intervient l’internationalisation (i18n), rendant les sites Web accessibles aux personnes du monde entier.

Next.js 14 simplifie le développement Web multilingue avec des outils tels que le routage linguistique et le chargement dynamique des messages. Il est conçu pour aider les développeurs à créer facilement des applications Web dynamiques et multilingues.

À la fin de cet article, nous aurons des informations pratiques sur l’internationalisation dans Next.js 14, de la configuration d’un nouveau projet à l’ajout du changement de langue.

Configuration d’un projet Next.js 14

Commençons par configurer notre projet avec i18n intégré.

Étape 1. Créez un nouveau projet Next.js en exécutant la commande ci-dessous. Pour le bien de cet article, nous le nommerons i18n-next-app:

npx create-next-app i18n-next-app

Étape 2. Accédez au dossier de votre projet et installez Next.js (version 14) et le next-intl emballer:

cd i18n-next-app
npm install next@latest next-intl

La commande ci-dessus installe Next.js avec ses fonctionnalités les plus récentes, telles que i18n, et inclut next-intl. La raison derrière l’utilisation next-intl est son intégration transparente avec l’App Router via un [locale] segment dynamique. Cette intégration nous permet de diffuser du contenu dans différentes langues.

Étape 3. Activez la prise en charge d’i18n dans Next.js 14 dans votre projet en ajoutant la configuration suivante dans votre next.config.js:

const withNextIntl = require('next-intl/plugin')();

module.exports = withNextIntl({
  
});

Ce code ci-dessus configure Next.js avec le next-intl plugin pour des capacités d’internationalisation améliorées. Il importe le plugin et l’applique à la configuration Next.js, permettant aux développeurs d’intégrer facilement des fonctionnalités d’internationalisation dans leurs projets. Ceci est fait tout en laissant de la place pour préserver d’autres configurations de projet.

Étape 4: Créer un content dossier à la racine du projet. À l’intérieur, créez des fichiers JSON pour chaque paramètre régional (en.json, es.json, de.json), contenant vos chaînes traduites. Cette approche compense la limitation actuelle de Next.js en matière de traduction automatique.

Pour le bien de ce projet, nous allons utiliser l’anglais, l’espagnol et l’allemand, mais n’hésitez pas à ajouter d’autres paramètres régionaux selon les besoins de votre projet :

{
  "Home": {
    "navigation": {
      "home": "Heim",
      "about": "Über uns",
      "contact": "Kontakt"
    },
    "title": "Internationalisierung (i18n) in Next.js 14",
    "description": "Next.js 14 führt erweiterte Internationalisierungs (i18n)-Funktionen ein, die Entwicklern ermöglichen, Übersetzungen, lokalisierungsbasiertes Routing und Inhaltslokalisierung für weltweit zugängliche Webanwendungen mühelos zu verwalten. <br /> <br />Darüber hinaus bietet es integrierte Unterstützung für mehrere Sprachvarianten, dynamisches Inhaltsladen und robuste Fallback-Behandlung."
  }
}

{
  "Home": {
    "navigation": {
      "home": "Inicio",
      "about": "Acerca de",
      "contact": "Contacto"
    },
    "title": "Internacionalización (i18n) en Next.js 14",
    "description": "Next.js 14 introduce características avanzadas de internacionalización (i18n), capacitando a los desarrolladores para gestionar fácilmente traducciones, enrutamiento basado en localización y localización de contenido para aplicaciones web globalmente accesibles. <br /> <br />Esto también aprovecha el soporte incorporado para múltiples locales, carga dinámica de contenido y manejo de respaldo robusto."
  }
}

{
  "Home": {
    "navigation": {
      "home": "Home",
      "about": "About",
      "contact": "Contact Us"
    },
    "title": "Internationalization(i18n) in Next.js 14",
    "description": "Next.js 14 introduces enhanced internationalization (i18n) features, empowering developers to effortlessly manage translations, locale-based routing, and content localization for globally accessible web applications. <br /> <br />This also piggy-backs built-in support for multiple locales, dynamic content loading, and robust fallback handling."
  }
}

Le contenu ci-dessus représente le contenu de la page de destination de nos projets adaptés pour répondre à trois langues distinctes.

Routage linguistique et slugs

Dans une application Web multilingue, le routage linguistique garantit que les utilisateurs sont dirigés vers la version appropriée du site en fonction de leurs préférences linguistiques. De plus, les slugs permettent la génération dynamique d’itinéraires, particulièrement utiles pour les pages riches en contenu comme les blogs ou les listes de produits.

Une fois notre configuration finalisée, implémentons le routage spécifique au langage. Configurons également des slugs de langage sans compter sur des bibliothèques supplémentaires.

Étape 1. Dans le src/ répertoire, créez un nouveau fichier et nommez-le i18n.ts. Configurez-le pour charger dynamiquement les messages conformément aux paramètres régionaux :

import { notFound } from "next/navigation";
import { getRequestConfig } from 'next-intl/server';

const locales: string[] = ['en', 'de', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

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

Dans cette étape, nous configurons le chargement dynamique des messages en fonction des paramètres régionaux choisis. Le getRequestConfig La fonction importe dynamiquement les fichiers JSON correspondant aux paramètres régionaux à partir du content dossier. Cela garantit que l’application adapte facilement son contenu aux différentes préférences linguistiques.

Étape 2. Créer un middleware.ts fichier à l’intérieur src/ pour correspondre aux paramètres régionaux et permettre la redirection de l’utilisateur en fonction des paramètres régionaux :

import createMiddleware from 'next-intl/middleware';

const middleware = createMiddleware({
  
  locales: ['en', 'de', 'es'],

  
  defaultLocale: 'en'
});

export default middleware;

export const config = {
  
  matcher: ["https://www.sitepoint.com/", '/(de|es|en)/:page*']
};

Dans cette étape, nous définissons un middleware qui correspond aux paramètres régionaux et redirige les utilisateurs en fonction de leur langue préférée. Nous spécifions les paramètres régionaux pris en charge et définissons un paramètre régional par défaut en cas d’absence de correspondance.

Étape 3. Ensuite, nous configurons la langue de l’application et modifions les composants de mise en page et de page. Établir un [locale] répertoire dans app/ et bouger layout.tsx et page.tsx à l’intérieur

interface RootLayoutProps {
  children: React.ReactNode;
  locale: never;
}

export default function RootLayout({ children, locale }: RootLayoutProps) {
  return (
    <html lang={locale}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

import Header from "@/components/Header";
import { useTranslations } from "next-intl";
import Image from "next/image";
import heroImage from "../../assets/img/intl_icon.png";

export default function Home() {
  const t = useTranslations("Home");

  
  const navigationKeys = Object.keys(t.raw("navigation"));

  return (
    <>
      <Header />
      <nav>
        <ul>
          {navigationKeys.map((key) => (
            <li key={key}>
              <a href={`#/${key}`}>{t(`navigation.${key}`)}</a>
            </li>
          ))}
        </ul>
      </nav>
      <main>
        <div>
          <aside>
            <h2>{t("title")}</h2>
            <p dangerouslySetInnerHTML={{ __html: t("description") }}></p>
          </aside>
          <aside>
            <Image src={heroImage} width={"600"} height={"600"} alt="" />
          </aside>
        </div>
      </main>
    </>
  );
}

A partir du code ci-dessus, débarrassé des styles (la version stylisée peut être trouvée ici) par souci de clarté, nous avons utilisé le useTranslations crochet de next-intl récupérer traduit contentoffrant une meilleure approche de la gestion du contenu multilingue.

Ce hook nous permet de récupérer les traductions de clés spécifiques, telles que title ou description, à partir de nos fichiers de messages JSON. Avec ces implémentations en place, notre application Next.js 14 est désormais équipée de routes linguistiques et de slugs.

Étape 4. Lorsque nous exécutons l’application et visitons des URL telles que localhost:port/en, localhost:port/es, localhost:port/denous voyons la sortie dans différentes langues.

Grâce à ces étapes, nous avons implémenté avec succès le routage linguistique et les slugs dans notre application Next.js 14, offrant ainsi une expérience multilingue transparente aux utilisateurs.

Implémentation du changement de langue

Ici, nous créons un composant de changement de langue LangSwitch.tsx. Ce composant servira de passerelle permettant aux utilisateurs de sélectionner la langue de leur choix :

 import React, { useState } from "react";
 import Image from "next/image";
 import { StaticImageData } from "next/image";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import gbFlag from "../assets/img/bg_flag.png";
 import geFlag from "../assets/img/german_flag.png";
 import esFlag from "../assets/img/spain_flag.png";

 const LangSwitcher: React.FC = () => {
  interface Option {
    country: string;
    code: string;
    flag: StaticImageData;
}

 const router = useRouter();
 const pathname = usePathname();

 const [isOptionsExpanded, setIsOptionsExpanded] = useState(false);

 const options: Option[] = [
    { country: "English", code: "en", flag: gbFlag },
    { country: "Deutsch", code: "de", flag: geFlag },
    { country: "Spanish", code: "es", flag: esFlag },
  ];

  const setOption = (option: Option) => {
    setIsOptionsExpanded(false);
    router.push(`/${option.code}`);
  };

  return (
    <div className="flex items-center justify-center bg-gray-100">
      <div className="relative text-lg w-48">
        <button
          className=" justify-between w-full border border-gray-500 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          onClick={() => setIsOptionsExpanded(!isOptionsExpanded)}
          onBlur={() => setIsOptionsExpanded(false)}
        >
          Select Language
          <svg
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            className={`h-4 w-4 transform transition-transform duration-200 ease-in-out ${
              isOptionsExpanded ? "rotate-180" : "rotate-0"
            }`}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </button>
        <div
          className={`transition-transform duration-500 ease-custom ${
            !isOptionsExpanded
              ? "-translate-y-1/2 scale-y-0 opacity-0"
              : "translate-y-0 scale-y-100 opacity-100"
          }`}
        >
          <ul className="absolute left-0 right-0 mb-4 bg-white divide-y rounded-lg shadow-lg overflow-hidden">
            {options.map((option, index) => (
              <li
                key={index}
                className="px-3 py-2 transition-colors duration-300 hover:bg-gray-200 flex items-center cursor-pointer"
                onMouseDown={(e) => {
                  e.preventDefault();
                  setOption(option);
                }}
                onClick={() => setIsOptionsExpanded(false)}
              >
                <Image
                  src={option.flag}
                  width={"20"}
                  height={"20"}
                  alt="logo"
                />
                &nbsp;&nbsp;{option.country}
                {pathname === `/${option.code}` && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    className="w-7 h-7 text-green-500 ml-auto"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={3}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default LangSwitcher;

Le LangSwitcher Le composant ci-dessus utilise celui de Next.js router et usePathname crochets pour gérer le routage et suivre le courant pathname. L’État est géré à l’aide du useState hook pour basculer la visibilité de la liste déroulante des options de langue. Un tableau appelé options stocke les options de langue, chaque objet représentant une langue et contenant ses propriétés respectives.

La fonction setOption est défini pour gérer la sélection de la langue. Lorsqu’un utilisateur clique sur une option de langue, il met à jour le URL avec le code de langue sélectionné. Si une option de langue correspond à la langue actuellement sélectionnée, une icône de coche s’affiche à côté d’elle.

Stylisé avec Tailwind CSS, le LangSwitcher Le composant améliore l’expérience utilisateur en fournissant une interface intuitive pour la sélection de la langue dans les applications Next.js 14 multilingues.

Maintenant que notre composant de changement de langue est prêt, nous l’intégrons dans notre header.tsx fichier dans la mise en page pour le rendre accessible sur toutes les pages de notre application. Et voilà : les utilisateurs peuvent facilement changer de langue, quelle que soit la page sur laquelle ils se trouvent.

Conclusion

En résumé, l’internationalisation joue un rôle crucial pour atteindre un public mondial et améliorer l’expérience utilisateur en fournissant du contenu dans les langues préférées des utilisateurs. Avec Next.js 14, les développeurs disposent d’outils puissants pour créer efficacement des sites Web multilingues dynamiques.

Depuis la configuration initiale en utilisant next-intl à la création de routages spécifiques à un langage et de slugs dynamiques, Next.js 14 organise les complexités du développement Web multilingue. De plus, nous avons exploré la création d’un sélecteur de langue dynamique pour améliorer l’expérience utilisateur.

Pour voir le projet en action, explorez la démonstration en direct hébergée sur Vercel. De plus, des informations et des conseils précieux pour la base de code sont disponibles sur le Dépôt GitHub.