DEV Community

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

Posted on

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

#nextjs #react #arabic #i18n 
                                                        ،السلام عليكم
Enter fullscreen mode Exit fullscreen mode

⁧معظم تطبيقات 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

⁧خاصية 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" />
Enter fullscreen mode Exit fullscreen mode

⁧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());
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

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

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

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

⁧قبل كل إصدار: بدّل اللغة إلى العربية وتصفّح التطبيق كاملًا. أي عنصر "يلتصق" بالجهة الخاطئة هو غالبًا 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.

favicon bedrockkit.com



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

⁧اكتشف SaaS Starter ←⁩

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

Top comments (1)

Collapse
 
svgicons profile image
Svg/icons •

One pattern that helps is naming navigation icons semantically (chevron-start / chevron-end) instead of physically (left / right), so direction changes don’t leak into component code.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.