المستنداتدليل المطورينهندسة اللغات المتعددة ونظام RTL

معمارية اللغات المتعددة ودعم RTL/LTR الأصيل

دليل متكامل لتوسيع اللغات وإدارة اتجاهات النصوص في المتجر بسلاسة.

1. إضافة لغة جديدة للمنظومة

خطوات بسيطة لإضافة أي لغة جديدة عبر ملف routing.ts وملف الترجمة messages.

src/app/[countryCode]/layout.tsx

typescript

import { NextIntlClientProvider } from "next-intl"
import { getMessages } from "next-intl/server"
import { isRtlLocale } from "@lib/util/is-rtl"
 
export default async function StoreLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ countryCode: string }>
}) {
  const { countryCode } = await params
  const messages = await getMessages()
  const isRtl = isRtlLocale()
  const dir = isRtl ? "rtl" : "ltr"
 
  return (
    <html lang={countryCode} dir={dir}>
      <body className={isRtl ? "font-vazirmatn" : "font-inter"}>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

2. قواعد تصميم الواجهات ثنائية الاتجاه

استخدام فئات Tailwind المنطقية وتفادي القيم الثابتة لليسار واليمين.

messages/fa.json

json

{
  "Index": {
    "title": "مستندات Loomix",
    "subtitle": "راهنمای جامع ساخت پلتفرم‌های تجارت الکترونیک ماژولار."
  },
  "Cart": {
    "title": "سبد خرید شما",
    "checkout": "ادامه فرآیند خرید"
  }
}

3. التخزين المؤقت الذكي للصفحات متعددة اللغات

يقوم Next.js 16 بتوليد وتخزين صفحات HTML استاتيكية منفصلة لكل لغة، مما يضمن أقصى سرعة تسليم عبر شبكة CDN.

تكوين generateStaticParams للغات المتعددة

bash

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

توليد مسبق لجميع الصفحات الثابتة بلغات المتجر الـ 7.
تحديث فوري عند طلب إعادة التحقق دون التأثير على بقية اللغات.