BelgelerGeliştirici KılavuzuÇoklu Dil ve Çift Yönlü Yönlendirme (RTL/LTR)

Çok Dilli Mimari ve Yerel RTL/LTR Desteği

7 küresel dili otomatik yönlendirme ve önbellek desteğiyle kusursuz yöneten next-intl altyapısı.

1. Rota Tabanlı Dil Yönetimi (Locale Routing)

Uluslararası SEO uyumluluğu için her URL'nin başına dil kodu (örn: /tr veya /en) eklenir.

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 Mantıksal Özellikler Stratejisi (Logical Properties)

Arayüzün RTL ve LTR dillerinde bozulmadan akması için Tailwind CSS mantıksal sınıfları (ms, me, start, end) kullanılır.

messages/fa.json

json

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

Ortam Değişkenleri Yapılandırması (Environment Variables)

Store projesinde varsayılan dil ve bölge ayarlarını yapılandırmak için .env dosyasında aşağıdaki değişkenler tanımlanmalıdır:

.env

bash

# Başlıklardan tespit edilemezse varsayılan bölge alternatifi
NEXT_PUBLIC_DEFAULT_REGION=us
 
# Varsayılan mağaza arayüzü dili
DEFAULT_LOCALE=en-US

NEXT_PUBLIC_DEFAULT_REGION: Konumlandırma başlıklarının (x-vercel-country gibi) bulunmadığı durumlarda varsayılan ülke kodunu belirler (uluslararası mağazalar için us, Türkiye için TR önerilir).
DEFAULT_LOCALE: Ön yüzün varsayılan dilini belirler (İngilizce mağazalar için en-US, Türkçe için tr-TR önerilir).