← retour aux notesRendre mon portfolio bilingue avec Next.js

Rendre mon portfolio bilingue avec Next.js

·Arouna Ouattara

Mon portfolio était uniquement en français. Je voulais une version anglaise, sans ajouter de librairie d’internationalisation pour un site de quelques pages.

Le principe

  • Le français reste à la racine : / et /blog.
  • L’anglais vit sous /en : /en et /en/blog.
  • Un sélecteur FR / EN en haut à droite permet de changer de langue, et le site s’en souvient.

Une page, deux langues

Chaque texte du site existe en deux versions, dans un simple objet :

export const site = {
  role: { fr: "Développeur Full Stack", en: "Full Stack Developer" },
  tagline: {
    fr: "Je transforme des idées en produits numériques.",
    en: "I turn ideas into digital products.",
  },
};

La page d’accueil est un seul composant qui reçoit la langue : <HomePage lang="fr" /> ou <HomePage lang="en" />. Il suffit ensuite d’afficher site.role[lang].

Le bon attribut lang

Pour que la balise <html> annonce la bonne langue aux navigateurs et à Google, j’utilise deux route groups : app/(fr) et app/(en), chacun avec son propre layout racine. Toutes les pages restent générées en statique.

Se souvenir du choix

Au clic sur le sélecteur, un cookie enregistre la langue pendant un an. Un petit middleware redirige ensuite les visiteurs anglophones :

export function middleware(request: NextRequest) {
  if (request.cookies.get("lang")?.value !== "en") return NextResponse.next();

  const url = request.nextUrl.clone();
  url.pathname = request.nextUrl.pathname === "/" ? "/en/" : "/en/blog/";
  return NextResponse.redirect(url);
}

Et le blog ?

Une note = un fichier Markdown. La même note traduite porte le même nom de fichier dans content/blog/fr et content/blog/en. Si une note n’existe qu’en français, elle apparaît quand même sur le blog anglais, avec un badge FR.

Résultat : un site bilingue, simple à maintenir, et toujours aussi rapide.

Sources