DocsDeveloper SectionMultilingual and RTL/LTR Support

Multilingual and Right-to-Left (RTL / LTR) Support

The Next.js frontend of the project is implemented to natively support right-to-left (Persian/Arabic) and left-to-right (English) languages using the next-intl library.

Configuring Direction and Locales in Next.js

Setting the dir attribute based on the active language in the src/app/[locale]/layout.tsx file:

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

Translation Files Structure (messages)

Key-value translation files are located in the messages/ folder:

messages/fa.json

json

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

Environment Variables Configuration

To configure default language and region settings in the Store project, the following variables must be set in the .env file:

.env

bash

# Default region fallback if not detected from headers
NEXT_PUBLIC_DEFAULT_REGION=us
 
# Default storefront language
DEFAULT_LOCALE=en-US

NEXT_PUBLIC_DEFAULT_REGION: Sets the default country code if geolocation headers (such as x-vercel-country) are absent (recommended: us for US/international stores, or IR for Iran).
DEFAULT_LOCALE: Determines the frontend's default language (recommended: en-US for English stores, or fa-IR for Persian).