Routage basé sur la langue

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

Problème

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

Solution

Incorporez un identifiant de langue directement dans le chemin de l'URL, tel que /en/about ou /fr/about. Cela rend chaque chemin unique à une langue spécifique, résolvant l'ambiguïté pour les utilisateurs et 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] dans app et déplacez-y votre fichier page.tsx principal.

// 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 telles que /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 devez 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 désormais toutes les pages dans une langue spécifique. Définir l'attribut lang ici informe les navigateurs de la langue du contenu de la page.

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 la mise en page racine. Cela permet à Next.js de générer statiquement ces routes au moment 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) aboutiront à une page 404 Not Found.

4. Ajouter des routes imbriquées

Toutes les autres pages de votre application sont désormais créées dans le 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 approprié.