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)

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.

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.

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. 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ı

next-i18next (App Router)

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;
};

Bunun yanı sıra istemci tarafı I18nProvider, generateStaticParams ve her sayfada ad alanı dizisi tanımlanmalıdır.

Intlayer

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)

react-i18next

{
  "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>
  );
};

Bu bileşeni kullanan sayfa about ad alanını yüklemek zorundadır ve CustomTypeOptions genişletilmedikçe t("counter.label") düz bir metinden ibarettir.

Intlayer

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>
  );
};

label ve increment katı tiplere sahiptir; yazım hataları anında TypeScript hatası verir ve eksik çeviriler derlemeyi durdurur.

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

next-i18next

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>
);

Sayfa seviyesinde i18n.getFixedT(locale, "about") çağrılmalı ve t ile locale bileşene prop olarak aktarılmalıdır.

Intlayer

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?

• i18next'i seçin: Geniş eklenti ekosistemine (özel algılayıcılar, arka uçlar, ICU, Locize) kesin olarak ihtiyacınız varsa, React dışı alanlarda da (Node servisleri, vanilla JS, diğer çatılar) yerelleştirme yapıyorsanız, ekibiniz bu araca zaten hakimse veya harici çeviri platformunuz locales/{lng}/{ns}.json biçimini zorunlu kılıyorsa. Ancak performans önemliyse ad alanlarını ve rota haritalarını yönetmek için zaman ayırmayı unutmayın.
• Intlayer'ı seçin: Bileşen düzeyinde içerik yönetimi, katı TypeScript desteği, derleme zamanı eksik anahtar hataları, sıfır çaba ile otomatik tree-shaking ve tembel yükleme, anında dil değişimi, eşzamanlı sunucu bileşenleri ve yerleşik düzenleme araçları (Görsel Editör, CMS, yapay zeka destekli çeviri, MCP sunucusu) istiyorsanız. Modüler kod tabanları ve tasarım sistemleri için idealdir.
• @intlayer/*-i18next adaptörlerini seçin: Halihazırda i18next kullanıyorsanız ve büyük bir yeniden yazım sürecine girmeden paket boyutunda ve tepki süresinde hemen kazanım sağlamak istiyorsanız.

İlgili Karşılaştırmalar

• next-intl vs Intlayer (aynı benchmark)
• Lingui vs Intlayer (aynı benchmark)
• vue-i18n vs Intlayer Karşılaştırması (aynı benchmark)
• next-i18next vs next-intl vs Intlayer
• react-i18next vs react-intl vs Intlayer
• i18next modası geçti mi?

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.

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.