سایت دوزبانه با Next.js: درس‌هایی از پیاده‌سازی فارسی و RTL

پشتیبانی واقعی از فارسی چیزی بیشتر از dir="rtl" است. در این یادداشت تجربه‌ی ما از چند پروژه‌ی دوزبانه را خلاصه می‌کنیم.

قانون اول: هیچ رشته‌ای در کامپوننت نباشد

همه‌ی متن‌ها — حتی برچسب‌های دسترس‌پذیری و پیام‌های خطا — باید از کاتالوگ ترجمه بیایند. ما از next-intl استفاده می‌کنیم و در CI با یک اسکریپت، وجود رشته‌ی هاردکد در JSX را خطا اعلام می‌کنیم.

قانون دوم: خصوصیت‌های منطقی CSS

به‌جای margin-left از margin-inline-start استفاده کنید؛ به‌جای left از inset-inline-start. با این کار، چیدمان بدون حتی یک شرط، در هر دو جهت درست است. آیکون‌های جهت‌دار (فلش‌ها) تنها استثنا هستند که با rtl:rotate-180 برمی‌گردند.

قانون سوم: اعداد و تاریخ‌ها بومی

تاریخ شمسی با Intl.DateTimeFormat('fa-IR-u-ca-persian') و ارقام فارسی با Intl.NumberFormat('fa-IR') به‌صورت استاندارد و بدون کتابخانه‌ی اضافه در دسترس‌اند.

نتیجه؟ سایتی که برای کاربر فارسی‌زبان «ترجمه‌شده» حس نمی‌شود؛ از اول فارسی است.