Site trilingue fr/en/ar avec Next.js : le vrai défi n'est pas la traduction, c'est le RTL

Rendre un site trilingue français / anglais / arabe avec Next.js : le vrai défi n'est pas la traduction, c'est le RTL. 🌍

Sur ce site, j'ai voulu proposer les trois langues, CV téléchargeable compris. Les leçons du chantier :

• 1️⃣ Le routage i18n de Next.js pose des bases saines : une locale par URL (/fr, /en, /ar), détection de la langue, SEO propre avec les balises hreflang.
• 2️⃣ L'arabe s'écrit de droite à gauche : dir="rtl" sur le document, et tout le layout doit suivre. Les propriétés CSS logiques (margin-inline-start plutôt que margin-left) font 90 % du travail sans dupliquer les styles.
• 3️⃣ La typographie compte : une police adaptée à l'arabe, des tailles ajustées, et vérifier chaque écran — un chiffre ou un nom latin au milieu d'un texte RTL réserve des surprises. 😅

Au final, le support RTL est un excellent test de la qualité de votre CSS : si votre layout casse en dir="rtl", c'est souvent qu'il était trop rigide dès le départ.

Voir le post original sur LinkedIn