Comment implémenter le routage basé sur les locales dans Next.js (Pages Router) v16

Problème

Lors de la création d'une application multilingue, une décision fondamentale détermine tout le reste : comment l'application saura-t-elle quelle langue afficher ? Sans mécanisme explicite, l'URL /about devient ambiguë—elle pourrait représenter du contenu dans n'importe quelle langue. Les utilisateurs ne peuvent pas partager de liens vers des versions linguistiques spécifiques, et les moteurs de recherche ont du mal à comprendre quelle version appartient à quel public. Cette ambiguïté crée des problèmes tant pour l'expérience utilisateur que pour le SEO, car il n'existe aucun moyen clair d'identifier ou de mettre en favoris du contenu dans une langue particulière.

Solution

Placez un identifiant de langue directement dans le chemin de l'URL en configurant la prise en charge intégrée du routage i18n de Next.js. Déclarez les locales que vous souhaitez prendre en charge et une locale par défaut dans votre configuration Next.js. Next.js gérera automatiquement le routage, rendant disponibles des chemins comme /fr/about et /nl-NL/about, tandis que la locale par défaut n'a pas de préfixe. Cela rend chaque chemin unique à une langue spécifique, éliminant l'ambiguïté pour les utilisateurs et les moteurs de recherche.

Étapes

1. Ajouter la configuration i18n à next.config.js

Ajoutez la configuration i18n à votre fichier next.config.js pour déclarer quelles locales votre application prend en charge.

module.exports = {
  i18n: {
    locales: ["en-US", "fr", "nl-NL"],
    defaultLocale: "en-US",
  },
};

Les locales sont des identifiants de locale UTS, un format standardisé pour définir les locales, généralement composé d'une langue, d'une région et d'un script séparés par un tiret. La defaultLocale est utilisée lors de la visite d'un chemin sans préfixe de locale.

2. Accéder aux informations de locale dans les pages

Utilisez le hook useRouter() pour accéder aux informations de locale dans vos composants de page.

import { useRouter } from "next/router";

export default function AboutPage() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

La propriété locale contient la locale actuellement active, locales contient toutes les locales configurées, et defaultLocale contient la locale par défaut configurée.

3. Accéder à la locale dans les fonctions de récupération de données

Lors du pré-rendu des pages avec getStaticProps ou getServerSideProps, les informations de locale sont fournies dans le contexte.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const { locale } = context;

  const messages = await import(`../messages/${locale}.json`);

  return {
    props: {
      messages: messages.default,
    },
  };
};

Cela vous permet de charger des données spécifiques à la locale au moment de la compilation ou de la requête en fonction de la locale active.

4. Lier entre les locales

Utilisez next/link avec une propriété locale pour passer à une locale différente.

import Link from "next/link";

export default function LanguageSwitcher() {
  return (
    <nav>
      <Link href="/about" locale="en-US">
        English
      </Link>
      <Link href="/about" locale="fr">
        Français
      </Link>
      <Link href="/about" locale="nl-NL">
        Nederlands
      </Link>
    </nav>
  );
}

Si aucune propriété locale n'est fournie, la locale actuellement active est utilisée lors des transitions côté client. La propriété locale permet aux utilisateurs de changer de langue tout en restant sur la même page logique.

5. Générer des chemins statiques pour toutes les locales

Lors de l'utilisation de getStaticPaths, les locales configurées sont fournies dans le paramètre de contexte sous locales et la defaultLocale configurée sous defaultLocale.

import { GetStaticPaths } from "next";

export const getStaticPaths: GetStaticPaths = async (context) => {
  const { locales } = context;

  const paths = locales.flatMap((locale) => [
    { params: { slug: "getting-started" }, locale },
    { params: { slug: "advanced" }, locale },
  ]);

  return {
    paths,
    fallback: false,
  };
};

Cela garantit que toutes les versions de locale de vos pages dynamiques sont pré-rendues au moment de la compilation.