مستنداتبخش برنامه نویسانچندزبانی و پشتیبانی RTL/LTR

چندزبانی و پشتیبانی راست‌چین (RTL / LTR)

فرانت‌اند Next.js پروژه به گونه‌ای پیاده‌سازی شده است که به صورت نیتیو از زبان‌های راست‌چین (فارسی/عربی) و چپ‌چین (انگلیسی) با استفاده از کتابخانه next-intl پشتیبانی می‌کند.

تنظیم Direction و Locales در Next.js

تنظیم ویژگی dir بر اساس زبان فعال در فایل src/app/[locale]/layout.tsx:

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>
  )
}

ساختار فایل‌های ترجمه (messages)

فایل‌های کلید-مقدار ترجمه در پوشه messages/ قرار دارند:

messages/fa.json

json

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

تنظیمات متغیرهای محیطی (Environment Variables)

جهت تنظیمات پیش‌فرض زبان و منطقه در پروژه‌ی Store، باید متغیرهای زیر در فایل .env تنظیم شوند:

.env

bash

# منطقه پیش‌فرض در صورت عدم تشخیص از Header ها
NEXT_PUBLIC_DEFAULT_REGION=IR
 
# زبان پیش‌فرض فروشگاه
DEFAULT_LOCALE=fa-IR

NEXT_PUBLIC_DEFAULT_REGION: برای تعیین کشور پیش‌فرض کاربر در مواردی که امکان شناسایی آن از طریق Headerها (مثلاً x-vercel-country) وجود نداشته باشد استفاده می‌شود (مانند IR برای ایران).
DEFAULT_LOCALE: تعیین‌کننده زبان پیش‌فرض فرانت‌اند است که در اینجا fa-IR برای زبان فارسی در نظر گرفته شده است.