Next.js'de i18n ile Statik ve Dinamik Render

    next-intl ile yaşanan sorun

    • Ne olur? useTranslations, getTranslations veya herhangi bir next-intl yardımcı fonksiyonunu Server Component içinde kullandığınızda, Next.js tüm rotayı dinamik olarak işaretler. ([Next Intl][1])

    • Neden? next-intl, mevcut locale'i yalnızca istek başlığı (x-next-intl-locale) üzerinden headers() ile okur. headers() dinamik bir API olduğu için, ona dokunan her bileşen statik optimizasyonunu kaybeder. ([Next Intl][1], [Next.js][2])

    • Resmi çözüm (boilerplate)

      1. Desteklenen her locale için generateStaticParams export edin.
      2. Her layout/page'de useTranslations'dan önce setRequestLocale(locale) çağırın. ([Next Intl][1]) Böylece header bağımlılığı kalkar, ancak fazladan kod ve kararsız bir API ile uğraşırsınız.

    intlayer ile bu sorun nasıl aşılır?

    Tasarım tercihleri

    1. Sadece route-param – Locale, Next.js'in her sayfaya zaten ilettiği [locale] URL segmentinden gelir.
    2. Derleme zamanı paketleri – Çeviriler normal ES modülleri olarak import edilir, tree-shake edilir ve derleme zamanında gömülür.
    3. Dinamik API yok – useT() React context'ten okur, headers() veya cookies() kullanmaz.
    4. Ekstra yapılandırma yok – Sayfalarınız app/[locale]/ altında olduğunda, Next.js her locale için otomatik olarak bir HTML dosyası üretir.