Trilingual fr/en/ar website with Next.js: the real challenge is not translation, it's RTL

Making a website trilingual French / English / Arabic with Next.js: the real challenge is not translation, it's RTL. 🌍

On this website, I wanted to offer all three languages, downloadable CV included. Lessons from the field:

• 1️⃣ Next.js i18n routing lays healthy foundations: one locale per URL (/fr, /en, /ar), language detection, clean SEO with hreflang tags.
• 2️⃣ Arabic is written right to left: dir="rtl" on the document, and the whole layout must follow. Logical CSS properties (margin-inline-start instead of margin-left) do 90% of the work without duplicating styles.
• 3️⃣ Typography matters: a font suited to Arabic, adjusted sizes, and checking every screen — a digit or a Latin name in the middle of RTL text holds surprises. 😅

In the end, RTL support is an excellent test of your CSS quality: if your layout breaks under dir="rtl", it was often too rigid to begin with.

See the original post on LinkedIn