الـ i18n: عربي + إنجليزي

الهدف

بعد هالدرس تقدر تضبط next-intl، تبني ملفات ترجمة للعربية والإنجليزية، تضيف RTL صح للعربية، وتـ detect لغة المستخدم تلقائيا.

ليش هذا الحين؟

Accessibility جاهز — التطبيق يشتغل للجميع. الحين نتوسّع: اللغة العربية = 420 مليون ناطق، أغلبهم في MENA اللي فيها من أسرع اقتصادات العالم نمو. ترى i18n مو "تنويع" — هو استراتيجية. وتطبيقك بيكون جاهز للأسواق العربية لو بدأت الحين.

الفكرة

next-intl:

أكثر مكتبة مستخدمة لـ i18n في Next.js App Router. مبنية لـ Server Components من البداية.

بنية الـ routing:

yourapp.com/        → English (default)
yourapp.com/ar/     → Arabic (RTL)
yourapp.com/ar/dashboard
yourapp.com/dashboard

RTL في CSS:

بدل margin-left / margin-right، استخدم logical properties:

margin-inline-start: 1rem;  /* اليسار في LTR، اليمين في RTL */
margin-inline-end: 1rem;    /* اليمين في LTR، اليسار في RTL */
padding-inline: 1rem;       /* padding يمين ويسار */

Tailwind v3+:

// بدل
className="ml-4 mr-2"

// استخدم
className="ms-4 me-2"   // ms = margin-start, me = margin-end