i18next VS Intlayer: React & Next.js Uluslararasılaştırma (i18n) Benchmark Karşılaştırması

i18next, JavaScript ekosisteminde en yaygın kullanılan i18n kütüphanesidir. react-i18next ve next-i18next aracılığıyla çok sayıda React ve Next.js uygulamasını destekler. Intlayer ise derleyici tabanlı ve bileşen kapsamlı (component-scoped) modern bir alternatiftir.

Bu makale iki aracı özellik listeleri yerine somut ölçümlerle karşılaştırır. Rakamlar, her kütüphaneyle aynı uygulamayı oluşturan ve tarayıcının gerçekte ne indirdiğini kaydeden açık kaynaklı bir test paketi olan Benchmark Bloom projesinden alınmıştır.

Özet (tl;dr): i18next, bu benchmark testindeki en ağır çalışma zamanıdır (runtime): Standart (naive) kurulumda Next.js üzerinde sayfa başına +77 KB gzip, tam ad alanı (namespace) ve tembel yükleme (lazy-loading) optimizasyonundan sonra bile +22 KB ek yük getirir. Intlayer ise yalnızca +0.3 KB ekler. Tamamen izole edilmiş (scoped) kurulum dışındaki tüm i18next yapılandırmaları, kullanıcının bulunmadığı diğer sayfaların çeviri metinlerinin yaklaşık %90'ını sızdırır; Intlayer ise varsayılan olarak %0 sızıntı ile çalışır. Tembel yüklenen bir backend ile dil değiştirmek react-i18next ile 123-185 ms sürerken Intlayer ile yalnızca 3-4 ms sürmüştür. i18next API'sini koruyan @intlayer/next-i18next uyumluluk adaptörü, sayfa boyutunu orijinalin 218.5 KB seviyesinden 150.7 KB seviyesine düşürmüştür.

Kısaca Özet

• i18next / react-i18next / next-i18next - Olgun, zengin eklenti ekosistemine sahip ve çatıdan bağımsız (framework-agnostic). Ad alanları, dil algılayıcıları, arka uçlar, eklenti üzerinden ICU ve zengin içerikler için <Trans> desteği sunar. İçerikler locales/{lng}/{ns}.json altında merkezi olarak toplanır. Güçlüdür ancak her optimizasyonu (ad alanı ayrımı, sayfa bazlı yükleme, tip güvenliği) geliştiricinin manuel olarak yapılandırmasını ve sürdürmesini gerektirir.
• Intlayer - Bileşen odaklı içerik modeli. .content.ts sözlükleri doğrudan hizmet ettikleri bileşenin yanında yer alır; derleme zamanı derleyicisi bileşen ve dil bazında ağaç budama (tree-shaking) ve tembel yükleme uygular, içerikten katı TypeScript tipleri otomatik oluşturulur ve eksik çeviriler derleme anında hata verir. Dahili middleware, SEO yardımcıları, Görsel Editör / CMS ve yapay zeka destekli çeviri sunar.

Tüm tablo içeriğini göster

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

Kütüphane	GitHub Yıldızları	Toplam Commit	Son Commit	İlk Sürüm	NPM Sürümü	NPM İndirmeleri
aymericzip/intlayer				Nisan 2024
i18next/i18next				Ocak 2012
i18next/react-i18next				Aralık 2015
i18next/next-i18next				Kasım 2018

Rozetler otomatik olarak güncellenir. Değerler zamanla değişiklik gösterebilir.

Özellik Karşılaştırması

Benchmark Testi

Neler Ölçüldü?

Benchmark Bloom test paketi, her kütüphane ile birebir aynı uygulamayı inşa eder: 10 sayfa (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), 10 dil (en, fr, es, de, it, pt, zh, ja, ko, ru), özdeş bileşenler ve özdeş içerik. Sayfalar İngilizce (en) ve Fransızca (fr) olarak test edilir. Her kütüphane dört farklı yükleme stratejisi ile değerlendirilir:

Intlayer için ayrı bir "scoped" varyantına ihtiyaç yoktur: Derleyici, içeriği bileşen düzeyinde otomatik olarak izole eder; bu nedenle static ve dynamic satırları zaten en iyi düzeyde optimize edilmiştir.

Her derleme için kaydedilen metrikler:

• Lib size: Yalnızca i18n kütüphanesini içe aktaran boş bir bileşenin gzip boyutu. Çalışma zamanının sabit maliyeti.
• Page JS: Sayfa başına indirilen ortalama JavaScript gzip boyutu (tüm sayfalar ve diller genelinde).
• Locale leak %: İndirilen JS içerisindeki, kullanıcının görüntülemediği bir dile ait çeviri metinlerinin oranı.
• Page leak %: İndirilen JS içerisindeki, kullanıcının bulunmadığı diğer sayfalara ait çeviri metinlerinin oranı.
• Component avg: İzole olarak derlenen her bir bileşenin ortalama gzip boyutu.
• E2E reactivity: Yeni bir dil seçimi ile DOM'da html[lang] etiketinin güncellenmesi arasındaki gerçek süre (Playwright, 5 deneme ortalaması).
• Hydration: React hidrasyon (hydration) aşamasının süresi.

Aşağıdaki veriler next-i18next 16.3.0, react-i18next 17.0.13 ve intlayer 9.5.1 sürümleriyle yapılan 2026-09-12 tarihli test çalıştırmasından alınmıştır. Test uygulaması bilinçli olarak kompakt tutulmuştur; bu nedenle sızıntı yüzdeleri yapısal bir örüntüyü temsil eder: İçeriğiniz büyüdükçe sızıntı katlanarak artarken çalışma zamanı maliyeti sabit kalır.

Next.js Sonuçları (next-i18next)

İlgilendiğiniz metrikleri ve kütüphaneleri seçin:

Sonuçların Analizi

• Çalışma zamanı maliyeti: i18next çekirdeği ile react-i18next birlikte test edilen en ağır çalışma zamanıdır: Boş bir bileşen için 19.7 KB gzip yer tutarken, next-intlayer yalnızca 5.5 KB tüketir.
• Standart kurulum maliyetlidir: init() içine resources doğrudan yerleştirildiğinde sayfa başına 218.5 KB boyuta ulaşılır; bu da temel uygulamaya göre +77.5 KB fazlalıktır. Her sayfa tüm ad alanlarını taşımak zorunda kalır.
• Manuel optimizasyon zahmetlidir: Bir arka uca (dynamic) geçmek 49 KB tasarruf sağlar ancak başka sayfalara ait metinlerin %90'ını sızdırmaya devam eder ve bu kurulumda indirilen metinlerin yarısı yanlış dile aittir. Rota bazlı ad alanlarına (scoped-dynamic) geçildiğinde sızıntı %0'a inse de ulaşılan 163.4 KB boyutu, hiçbir manuel ayar gerektirmeyen Intlayer'ın (141.3 KB) sayfa başına 22.4 KB üzerindedir.
• Bileşen boyutu: useTranslation() kullanan bir bileşen 26-79 KB boyutunda derlenirken, aynı bileşen useIntlayer() ile yalnızca 6.9 KB yer kaplar.
• Hidrasyon gecikmesi: dynamic kurulumunda hidrasyon süresi 27.7 ms'ye yükselir; çünkü React hidrasyona başlamadan önce istemcide i18next örneğinin başlatılması ve arka uçtan veri alması gerekir.

Tüm kütüphaneler ve her strateji için tam tablo Next.js kıyaslama raporunda.

TanStack Start Sonuçları (react-i18next)

Next.js'e özgü yapılandırmaları dışarıda bırakmak adına TanStack Start üzerinde doğrudan react-i18next ile yapılan ölçümler:

Sonuçların Analizi

• Standart react-i18next uygulaması temel uygulamaya kıyasla sayfa başına +69 KB fazla kod taşır ve hidrasyon 85 ms (temelin 4 katı) sürer; çünkü tüm kaynak ağacı ilk render öncesinde istemcide işlenir ve kaydedilir.
• Dil değişiminde gecikme: Kaynaklar arka uç üzerinden tembel yüklendiğinde, dili değiştirmek html[lang] güncellenmeden önce bir ağ gidiş-dönüşü (round-trip) gerektirir: dynamic modunda 123 ms, scoped-static modunda 185 ms. Intlayer ise her iki modda da DOM'u 3-4 ms içinde günceller; dil değişimi ağ çağrılarına takılmadan anında gerçekleşir.
• Tamamen optimize edilmiş scoped-dynamic yapılandırması 127.2 KB seviyesine inse de, Intlayer'ın dynamic satırından +8.6 KB daha ağırdır ve bu sonuca ulaşmak için rota-ad alanı eşleme haritası, arka uç yükleyicisi ve Suspense sınırları gerekmiştir.
• Intlayer'ın static modu, yalnızca ilgili sayfanın bileşenleri tarafından içe aktarılan sözlükleri paketlediği için zaten %0 sayfa sızıntısına sahiptir. importMode: 'dynamic' ayarını açmak dil sızıntısını da tamamen ortadan kaldırır.
• Bileşen boyutu: react-i18next ile bileşen başına 24-27 KB iken Intlayer ile 6-8 KB seviyesindedir.

Tam tablo TanStack Start kıyaslama raporunda.

Fark Nereden Kaynaklanıyor? Global Örnek vs Derlenmiş Sözlükler

i18next, 2012 yılında bir çalışma zamanı kütüphanesi olarak tasarlandı: Global bir örnek kaynak deposunu tutar, eklentiler bunu genişletir ve t() render anında anahtarları arar. Bu yapı ona yüksek esneklik kazandırsa da performans açısından ağır bir yük getirir:

.
├── i18n.ts                      # createInstance().use(...).use(...).init({...})
└── src
    ├── locales
    │   ├── en
    │   │   ├── common.json
    │   │   ├── home.json
    │   │   └── about.json
    │   └── fr
    │       ├── common.json
    │       ├── home.json
    │       └── about.json
    ├── components
    │   └── Counter.tsx          # useTranslation("about") + t("counter.label")
    └── app
        └── [locale]
            └── about
                └── page.tsx     # ["common", "about"] gerektirdiğini bilmek zorundadır

Global örnek, bileşenin hangi anahtarlara ihtiyaç duyacağını önceden bilemez; bu nedenle yüklemesi söylenen tüm ad alanlarını bellekte tutar. Optimizasyon yapmak sizin katalogları bölmenizi, sizin her sayfanın ihtiyaç duyduğu ad alanlarını listelemenizi ve bileşenler taşındıkça bu listeyi elle güncellemenizi gerektirir.

Maliyet iki eksende birden büyür, sayfalar ve diller:

Benchmark notlarında ifade edildiği gibi: "Tip güvenliğini korurken hangi sayfaya hangi ad alanının dahil edileceğini tam olarak bilmek tam bir kabustur".

Intlayer global örneği tamamen ortadan kaldırır. İçerik doğrudan bileşenin yanında tanımlanır ve derleyici bağımlılık grafiğini derleme zamanında çözer:

.
├── intlayer.config.ts
└── src
    ├── components
    │   └── Counter
    │       ├── index.tsx        # useIntlayer("counter")
    │       └── index.content.ts
    └── app
        └── [locale]
            └── about
                ├── page.tsx
                └── page.content.ts

@intlayer/swc / @intlayer/babel hangi bileşenin hangi sözlüğü kullandığını tespit eder, yalnızca bunları ve yalnızca aktif dil için paketler, kullanılmayan içerikleri eler. "scoped-dynamic" kalıbı, ekibin yönetmek zorunda olduğu bir kural yerine derlemenin otomatik bir çıktısı haline gelir.

dynamic satırındaki rakamları elde etmek için intlayer.config.ts dosyasında dictionary.importMode: 'dynamic' ayarını yapmanız yeterlidir. Ayrıntılar için paket optimizasyonu kılavuzuna bakın.

Geliştirici Deneyimi (DX)

Kurulum Karşılaştırması

import { createInstance } from "i18next";
import { initReactI18next } from "react-i18next/initReactI18next";
import resourcesToBackend from "i18next-resources-to-backend";
import { defaultLocale } from "@/i18n.config";

const backend = resourcesToBackend(
  (locale: string, namespace: string) =>
    import(`../../locales/${locale}/${namespace}.json`)
);

export const initI18next = async (
  locale: string,
  namespaces: string[] = ["common"]
) => {
  const i18n = createInstance();
  await i18n
    .use(initReactI18next)
    .use(backend)
    .init({
      lng: locale,
      fallbackLng: defaultLocale,
      ns: namespaces,
      defaultNS: "common",
      interpolation: { escapeValue: false },
      react: { useSuspense: false },
    });
  return i18n;
};

import { type IntlayerConfig, Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

import { getHTMLTextDir } from "intlayer";
import { IntlayerClientProvider, type NextLayoutIntlayer } from "next-intlayer";

const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
  const { locale } = await params;

  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body>
        <IntlayerClientProvider locale={locale}>
          {children}
        </IntlayerClientProvider>
      </body>
    </html>
  );
};

export default LocaleLayout;

İstemci Bileşeni (Client Component)

{
  "counter": {
    "label": "Counter",
    "increment": "Increment"
  }
}

"use client";

import { useState } from "react";
import { useTranslation } from "react-i18next";

export const Counter = () => {
  const { t, i18n } = useTranslation("about");
  const [count, setCount] = useState(0);
  const numberFormat = new Intl.NumberFormat(i18n.language);

  return (
    <div>
      <p>{numberFormat.format(count)}</p>
      <button
        aria-label={t("counter.label")}
        onClick={() => setCount((c) => c + 1)}
      >
        {t("counter.increment")}
      </button>
    </div>
  );
};

import { t, type Dictionary } from "intlayer";

const counterContent = {
  key: "counter",
  content: {
    label: t({ en: "Counter", fr: "Compteur" }),
    increment: t({ en: "Increment", fr: "Incrémenter" }),
  },
} satisfies Dictionary;

export default counterContent;

"use client";

import { useState } from "react";
import { useIntlayer } from "next-intlayer";
import { useNumber } from "next-intlayer/format";

export const Counter = () => {
  const { label, increment } = useIntlayer("counter");
  const number = useNumber();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{number(count)}</p>
      <button aria-label={label} onClick={() => setCount((c) => c + 1)}>
        {increment}
      </button>
    </div>
  );
};

Eşzamanlı Sunucu Bileşeni (Server Component)

type ServerCounterProps = {
  t: (key: string) => string;
  locale: string;
  count: number;
};

export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
  <div>
    <p>{new Intl.NumberFormat(locale).format(count)}</p>
    <button aria-label={t("counter.label")}>{t("counter.increment")}</button>
  </div>
);

import { useIntlayer } from "next-intlayer/server";
import { useNumber } from "next-intlayer/server/format";

export const ServerCounter = ({ count }: { count: number }) => {
  const { label, increment } = useIntlayer("counter");
  const number = useNumber();

  return (
    <div>
      <p>{number(count)}</p>
      <button aria-label={label}>{increment}</button>
    </div>
  );
};

i18next API'sini Koruyarak Intlayer Performansına Erişin

Yukarıdaki benchmark kazanımlarını elde etmek için bileşenlerinizi sıfırdan yeniden yazmak zorunda değilsiniz. @intlayer/i18next, @intlayer/react-i18next ve @intlayer/next-i18next uyumluluk adaptörleri tak-çalıştır niteliğindedir: useTranslation, t(), <Trans>, çoğullaştırmalar ve bağlam sonekleri Intlayer derleyicisi tarafından optimize edilen sözlükler üzerinden çalışmaya devam eder.

import type { NextConfig } from "next";
import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";

const withIntlayer = createNextI18nPlugin();

const nextConfig: NextConfig = {};

export default withIntlayer(nextConfig);

import { defineConfig } from "vite";
import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";

export default defineConfig({
  plugins: [reactI18nextVitePlugin()],
});

Benchmark testinde, aynı Next.js uygulamasının uyumluluk derlemesi kodlara dokunulmadan sayfa başına 218.5 KB'tan 150.7 KB'a, bileşen başına 78.5 KB'tan 9.7 KB'a, sayfa sızıntısı ~%90'dan %0'a gerilemiş ve hidrasyon süresi 15.6 ms'den 11.3 ms'ye düşmüştür. Mevcut locales/{lng}/{ns}.json dosyalarınız JSON senkronizasyon eklentisi sayesinde ana kaynak olarak kalabilir.

Geçiş kılavuzlarına göz atın: i18next, react-i18next, next-i18next.

Hangisini Ne Zaman Seçmeli?

SSS (Sıkça Sorulan Sorular)

İlgili Karşılaştırmalar

Aynı kıyaslama, diğer kütüphaneler:

i18next hakkında daha fazlası:

Referans belgeleri:

Uyumluluk adaptörleri:

Geçiş kılavuzları:

Bu kütüphanelerin nereden geldiğini anlamak için JavaScript i18n tarihini okuyun.

GitHub Yıldızları

GitHub yıldızları bir projenin popülerliğini, topluluk güvenini ve uzun vadeli sürdürülebilirliğini yansıtır. Tek başına teknik kaliteyi kanıtlamasa da, kaç geliştiricinin projeyi faydalı bulduğunu ve benimsediğini gösterir.

Commit etkinliği

Yıldızlar popülerliği gösterir. Commit sayısı ise bir projeye ne kadar emek verildiğini gösterir. Bu yazı yazıldığında Intlayer yaklaşık 7.500 commit içeriyor; bu, burada karşılaştırılan kütüphanelerin çoğundan fazla ve next-intl ya da next-i18next kütüphanesinin yaklaşık 5 katı.

Intlayer bir monorepo olduğundan bu sayı her framework paketini, CLI'yi ve dokümantasyonu kapsar. Commit sayısını kalitenin değil, etkinliğin bir göstergesi olarak okuyun.

npm indirmeleri

İndirme sayıları en iyi çözümleri değil, en eski çözümleri ödüllendirir. Yıllar önce yayımlanmış bir kütüphane, onu o zaman seçen her proje, her CI çalışması ve ona bağımlı her paket tarafından hâlâ kurulur. Bu sayı yeni bir tercihten çok ataleti ölçer.

Yapay zekâ asistanları bu etkiyi büyütür. next-intl, i18next ve vue-i18n eğitildikleri kodun her yerinde bulunduğu için, alternatifleri karşılaştırmadan bunları varsayılan olarak önerirler. Her öneri indirme sayısını artırır, bu da bir sonraki öneriyi besler. İndirme sayısına değil, benchmark sonuçlarına göre karşılaştırın.

Sonuç

i18next hak ettiği konuma sahiptir: Her ortamda çalışır, her senaryo için bir eklentisi vardır ve 10 yılı aşkın süredir geliştirilmektedir. Ancak bu benchmark, çalışma zamanı odaklı mimarinin getirdiği maliyeti açıkça göstermektedir. Standart yapılandırma sayfa başına +70-77 KB gzip ek yük getirmekte, diğer sayfalara ait içeriğin ~%90'ını sızdırmakta ve dil değişimi 100 ms'nin üzerinde sürmektedir. Sızıntıyı sıfıra indirmek mümkündür ancak bu da karmaşık bir manuel takip gerektirir ve yine de Intlayer'dan 9-22 KB daha ağırdır.

Intlayer bu iş yükünü derleyiciye devreder. Bileşen başına sözlükler, dil başına tembel yükleme ve gereksiz metinlerin ayıklanması derlemenin otomatik sonuçlarıdır. Aynı uygulamada: Sayfa başına yalnızca +0.3 KB, %0 sızıntı, 3 ila 10 kat daha küçük bileşenler ve 3-4 ms içinde dil değişimi.

Tüm ham veriler, test uygulamaları ve otomasyon komutları Benchmark Bloom deposunda herkese açıktır. Kendiniz test edebilirsiniz.

Daha fazla bilgi için 'Neden Intlayer?' dokümanını inceleyin.