⁧دعم العربية (RTL) في Next.js 16 — ٦ أخطاء شائعة وكيف تتجنبها⁩

Lemon Technologies — Tue, 06 Oct 2026 16:21:09 +0000

                                                        ،السلام عليكم

⁧معظم تطبيقات SaaS تُبنى بالإنجليزية أولًا، ثم تُضاف العربية في النهاية… فينهار كل شيء: الهوامش في الجهة الخاطئة، الأيقونات معكوسة، التواريخ غير مفهومة.⁩

⁧أثناء بناء قالب SaaS بـ Next.js 16 الداعم ل عشر ١٠ لغات منها العربية، واجهت هذه المشاكل واحدة تلو الأخرى. إليك الحلول التي اعتمدتها.⁩

⁧1. ضبط `dir` و `lang` على مستوى `<html>`⁩

⁧لا تضع dir="rtl" على عناصر متفرقة. اضبطه مرة واحدة في الـ layout حسب اللغة:⁩

// app/[locale]/layout.tsx
const RTL_LOCALES = new Set(['ar', 'he', 'fa', 'ur']);

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

⁧خاصية lang مهمة أيضًا: قارئات الشاشة تعتمد عليها لنطق النص بشكل صحيح.⁩

⁧2. توقف عن استخدام `left` و `right`⁩

⁧الخطأ الأكثر شيوعًا هو ml-4 أو pr-2 أو left-0. استخدم الخصائص المنطقية (logical properties) التي تنقلب تلقائيًا:⁩

⁧استخدم⁩	⁧بدلًا من⁩
`ms-4` / `me-4`	`ml-4` / `mr-4`
`ps-2` / `pe-2`	`pl-2` / `pr-2`
`start-0` / `end-0`	`left-0` / `right-0`
`text-start`	`text-left`
`rounded-s-lg`	`rounded-l-lg`
`border-s`	`border-l`

⁧وفي CSS العادي: margin-inline-start بدلًا من margin-left.⁩

⁧3. الأيقونات الاتجاهية يجب أن تنعكس… وليس كلها⁩

⁧أسهم "التالي" و"السابق" يجب أن تنعكس. أما أيقونات مثل البحث أو الإعدادات أو علامة ✓ فلا:⁩

<ChevronRight className="rtl:-scale-x-100" aria-hidden="true" />

⁧4. الأرقام والتواريخ: استخدم `Intl`⁩

⁧لا تكتب التنسيق يدويًا. واجعل نظام الأرقام قرارًا واعيًا: في تونس والجزائر تُستخدم الأرقام اللاتينية (123)، وفي المشرق ومصر وفلسطين غالبًا الأرقام الهندية (١٢٣).⁩

new Intl.NumberFormat('ar-TN', {
  style: 'currency',
  currency: 'EUR',
}).format(29.99);

new Intl.DateTimeFormat('ar', {
  dateStyle: 'long',
  numberingSystem: 'latn',
}).format(new Date());

⁧5. خط عربي حقيقي⁩

⁧الخطوط اللاتينية لا تحتوي غالبًا على حروف عربية، فيستخدم المتصفح خطًا احتياطيًا رديئًا. حمّل خطًا عربيًا عبر next/font:⁩

import { IBM_Plex_Sans_Arabic } from 'next/font/google';

const arabic = IBM_Plex_Sans_Arabic({
  subsets: ['arabic'],
  weight: ['400', '600'],
});

⁧ونصيحة: زد line-height قليلًا للعربية، فالحروف تحتاج مساحة أكبر عموديًا.⁩

⁧6. النصوص المختلطة (عربي + إنجليزي)⁩

⁧أسماء المستخدمين، البريد الإلكتروني، أسماء المنتجات… قد تظهر بترتيب خاطئ داخل جملة عربية. الحل: <bdi> أو dir="auto" لأي محتوى يُدخله المستخدم:⁩

<p>مرحبًا <bdi>{user.name}</bdi>، لديك 3 إشعارات</p>
<input dir="auto" name="title" />

⁧اختبار سريع⁩

⁧قبل كل إصدار: بدّل اللغة إلى العربية وتصفّح التطبيق كاملًا. أي عنصر "يلتصق" بالجهة الخاطئة هو غالبًا left أو right منسي.⁩

⁧الخلاصة⁩

⁧دعم RTL ليس ترجمة فقط، بل قرار تصميمي يُتخذ من اليوم الأول. كلما تأخرت، زادت الكلفة.⁩

⁧عن المشروع: SaaS Starter⁩

⁧كل ما ذكرته في هذا المقال مطبَّق في SaaS Starter، القالب الذي نطوّره في Lemon Technologies. فكرته بسيطة: كل مشروع SaaS يبدأ بنفس الأسابيع من العمل المتكرر قبل كتابة أول ميزة حقيقية، فلماذا نعيد بناءه في كل مرة؟ SaaS Starter يمنحك هذا الأساس جاهزًا ومختبرًا، لتركّز على منتجك أنت.⁩

⁧يتضمن القالب:⁩

⁧Next.js 16 مع TypeScript و PostgreSQL و Prisma⁩
⁧تسجيل الدخول والمصادقة عبر NextAuth v5⁩
⁧الدفع والاشتراكات عبر Lemon Squeezy، مع إدارة ضريبة القيمة المضافة الأوروبية تلقائيًا⁩
⁧الفرق والأدوار والدعوات لتطبيقات B2B⁩
⁧تكامل جاهز مع الذكاء الاصطناعي عبر Anthropic API⁩
⁧10 لغات: العربية، الأردية، الأويغورية، التركية العثمانية، التركية، الإنجليزية، الفرنسية، الألمانية، الإسبانية، الهولندية، مع دعم كامل لـ RTL منذ البداية
⁧إمكانية الوصول وفق معيار WCAG 2.1 AA⁩
⁧Storybook لتوثيق المكوّنات، و GitHub Actions للـ CI/CD⁩ ⁩

⁧نؤمن في Lemon Technologies بأن الويب يجب أن يعمل بكل اللغات وفي كل الاتجاهات. Every language. Every direction.⁩

SaaS Starter — Next.js 16 SaaS Boilerplate with Auth, Billing & Teams

A production-ready Next.js 16 SaaS boilerplate: eight OAuth providers, organization-scoped billing with Lemon Squeezy and Stripe, teams with seat limits, a Claude AI playground, and ten languages including right-to-left. One-time purchase, full source code.

bedrockkit.com

⁧القالب متاح بترخيصين: فردي للمطوّرين المستقلين، وتجاري للشركات (حتى 10 مطوّرين).⁩

⁧اكتشف SaaS Starter ←⁩

⁧هل واجهت مشاكل أخرى مع RTL في مشاريعك؟ شاركها في التعليقات.⁩

DEV Community: Lemon Technologies