文档中心开发者技术手册全球多语言体系与双向排版 (RTL/LTR)

国际化多语言体系与原生 RTL/LTR 双向排版架构

基于 next-intl 构建的强固多语言工程体系，无缝支持全球 7 种主流语言，具备智能语种重定向与边缘级缓存支持。

1. 基于 URL 前缀的语言路由体系 (Locale Routing)

为了达成无可挑剔的跨国搜索引擎优化（SEO），每个页面地址均天然包含语言代码前缀（例如 /zh 或 /en）。

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. CSS 逻辑属性样式策略 (Logical Properties)

全站采用 Tailwind CSS 现代化逻辑属性类（ms、me、start、end），无论从左至右还是从右至左排版，界面布局均自适应镜像反转。

messages/fa.json

json

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

环境变量配置说明 (Environment Variables)

若要在 Storefront 前端项目中配置默认语言与国家地区，请在 .env 文件中定义如下变量：

.env (多语言与默认地区配置)

bash

# 若请求头中未检测到地理位置时的备用国家代码
NEXT_PUBLIC_DEFAULT_REGION=us
 
# 商城默认启动语言
DEFAULT_LOCALE=en-US

NEXT_PUBLIC_DEFAULT_REGION: 当缺失地理位置请求头（如 x-vercel-country）时生效的默认国家代码（跨国站点建议设为 us，针对中国境内市场可设为 CN）。
DEFAULT_LOCALE: 决定前台默认呈现的主语言（简体中文站点建议设为 zh-CN，或国际站点设为 en-US）。