Routage basé sur la langue

Configuration du routage basé sur la langue dans Next.js (App Router)

Problème

Une URL unique, comme /about, est intrinsèquement ambiguë lorsqu'une application prend en charge plusieurs langues. Les utilisateurs visitant cette URL reçoivent du contenu dans une langue par défaut, mais ils n'ont aucun moyen de créer un lien vers ou de mettre en favori une version de cette page dans une langue différente. Cette ambiguïté confond les moteurs de recherche, qui peuvent ne pas indexer toutes les versions linguistiques ou peuvent les mélanger.

Solution

Incorporer un identifiant de langue directement dans le chemin de l'URL, comme /en/about ou /fr/about. Cela rend chaque chemin unique à une langue spécifique, résolvant l'ambiguïté tant pour les utilisateurs que pour les moteurs de recherche.

Étapes

1. Créer un segment de langue dynamique

Dans le Next.js App Router, vous gérez le routage linguistique en créant un dossier de segment dynamique à la racine de votre répertoire app. Créez un nouveau dossier nommé [lang] à l'intérieur de app et déplacez-y votre fichier principal page.tsx.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Ce dossier [lang] capture la première partie de l'URL (par exemple, 'en' ou 'fr') et la transmet en tant que propriété lang à l'intérieur de l'objet params à votre composant de page. Vous pouvez maintenant accéder à votre page via des URL comme /en ou /fr.

2. Mettre à jour la mise en page racine

Votre layout.tsx racine doit également être déplacé dans le dossier app/[lang]. Il recevra également le paramètre lang, que vous devriez utiliser pour définir l'attribut lang sur la balise <html> pour l'accessibilité et le référencement.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Cette mise en page enveloppe maintenant toutes les pages dans une langue spécifique. La définition de l'attribut lang ici informe les navigateurs de la langue dans laquelle le contenu de la page est rédigé.

3. Définir les langues prises en charge

Pour indiquer à Next.js quels segments de langue sont valides, vous pouvez exporter une fonction generateStaticParams depuis le layout racine. Cela permet à Next.js de générer statiquement ces routes lors de la compilation.

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Cette fonction informe Next.js que votre application prend en charge /en, /es, et /fr. Les requêtes pour d'autres chemins (comme /de) généreront une page 404 Not Found.

4. Ajouter des routes imbriquées

Toutes les autres pages de votre application sont maintenant créées à l'intérieur du dossier [lang]. Par exemple, pour créer une page 'à propos', vous ajouteriez app/[lang]/about/page.tsx.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>About page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Ce fichier crée automatiquement des routes accessibles à /en/about, /es/about, et /fr/about. Le paramètre lang est disponible sur toutes les pages si vous en avez besoin pour récupérer le contenu traduit correct.