DocumentaciónGuía para DesarrolladoresInternacionalización y Soporte Bidireccional (RTL/LTR)

Arquitectura Multilingüe y Soporte Nativo RTL/LTR

Infraestructura robusta con next-intl que gestiona 7 idiomas globales con redirección automática y soporte de caché.

1. Gestión de Idiomas Basada en Rutas (Locale Routing)

Para un SEO internacional perfecto, cada URL incluye el prefijo del código de idioma (ej. /es o /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. Estrategia de Propiedades Lógicas en CSS (Logical Properties)

Se utilizan clases lógicas de Tailwind CSS (ms, me, start, end) para garantizar un flujo visual perfecto tanto en LTR como en RTL.

messages/fa.json

json

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

Configuración de Variables de Entorno (Environment Variables)

Para configurar el idioma y la región predeterminados en el proyecto Store, deben establecerse las siguientes variables en el archivo .env:

.env (Configuración de Idioma y Región)

bash

# Región alternativa si no se detecta en los encabezados
NEXT_PUBLIC_DEFAULT_REGION=us
 
# Idioma predeterminado de la tienda
DEFAULT_LOCALE=en-US

NEXT_PUBLIC_DEFAULT_REGION: Establece el código de país predeterminado si los encabezados de geolocalización (como x-vercel-country) están ausentes (recomendado: us para tiendas internacionales, o ES para España).
DEFAULT_LOCALE: Determina el idioma predeterminado del frontend (recomendado: es-ES para español, o en-US para inglés).