next-intl ve Intlayer Karşılaştırması: React & Next.js Uluslararasılaşma (i18n) Testi

next-intl, Next.js için en popüler i18n kütüphanesidir. Intlayer ise derleyici tabanlı, bileşen kapsamlı bir alternatiftir. Her ikisi de bir App Router uygulamasını yerelleştirir. Soru, uygulama derlendikten sonra her birinin maliyetinin ne olduğudur.

Bu makale bir kılavuz değildir. Her kütüphaneyle aynı uygulamayı derleyen ve tarayıcının gerçekte ne indirip çalıştırdığını ölçen açık kaynaklı bir karşılaştırma paketi olan Benchmark Bloom verileriyle desteklenen bir karşılaştırmadır.

tl;dr: Aynı Next.js uygulamasında, next-intl her sayfaya +12.6 KB gzip JavaScript eklerken, Intlayer için bu +0.3 KB'dir. Ekstra bir çalışma olmadan, next-intl her sayfayla birlikte diğer sayfaların dizgilerinin yaklaşık %90'ını gönderir. next-intl ile %0 sızıntıya ulaşmak ad alanı kapsamlandırması ve sayfa başına pick(messages, [...]) gerektirir. Intlayer, derleyicisi içeriği bileşen başına kapsamlandırdığı için varsayılan olarak %0'a ulaşır. Intlayer çıktısıyla next-intl API'sini korumak istiyorsanız, @intlayer/next-intl bağdaştırıcısı orijinalin 153.6 KB değerine karşılık sayfa başına 147.5 KB olarak ölçülmüştür.

Kısaca

• next-intl - Next.js topluluk standardı. Dil başına merkezi JSON sözlükleri, tam ICU MessageFormat desteği ve Next.js istek işleme ile yönlendirme mekanizmasına derin entegrasyon.
• Intlayer - Bileşen odaklı içerik modeli. .content.ts dosyaları doğrudan bileşenlerin yanında bulunur, derleme zamanı derleyicisi bunları bileşen ve dil başına tree-shake ve tembel yükleme yapar, katı TypeScript tiplerini otomatik üretir.

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
amannn/next-intl				Mart 2021

Rozetler otomatik olarak güncellenir.

Özellik karşılaştırması

Karşılaştırmalı test

Neler ölçüldü?

Benchmark Bloom test paketi, her kütüphane ile aynı uygulamayı derler: 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 en ve fr dillerinde ölçülür. Her kütüphane dört yükleme stratejisi ile test edilmiştir:

Intlayer'ın "scoped" varyantı yoktur: derleyici içeriği otomatik olarak bileşen başına sınırlar, bu nedenle static ve dynamic satırları zaten kapsamlandırılmıştır.

Her derleme için şunlar kaydedilir:

• Kütüphane boyutu (Lib size): Yalnızca i18n kütüphanesini içe aktaran boş bir bileşenin gzip boyutu.
• Sayfa JS (Page JS): Sayfa başına indirilen gzip sıkıştırmalı JavaScript.
• Dil sızıntısı % (Locale leak %): Kullanıcının görüntülemediği bir dile ait dizgilerin oranı.
• Sayfa sızıntısı % (Page leak %): Kullanıcının üzerinde bulunmadığı bir sayfaya ait dizgilerin oranı.
• Bileşen ortalaması (Component avg): Yalıtılmış olarak derlenen her bileşenin ortalama gzip boyutu.
• E2E tepkisellik: Dil değişiminden DOM'daki html[lang] güncellenmesine kadar geçen süre.
• Hidrasyon: React hidrasyon aşamasının süresi.

Aşağıdaki veriler next-intl 4.14.2 ve intlayer 9.5.1 ile 2026-09-12 tarihindeki çalıştırmadan alınmıştır.

Next.js (App Router) Sonuçları

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

Sonuçlar nasıl okunmalı?

• Çalışma zamanı maliyeti. Temel uygulama sayfa başına 141.0 KB'dir. next-intl bunu 153.6 KB'ye çıkarırken (her sayfada +12.6 KB gzip), Intlayer yalnızca 141.3 KB (+0.3 KB) yer kaplar.
• İçerik sızıntısı. En yaygın kurulumlarda (static ve dynamic), next-intl tüm en.json istemci sağlayıcısına girdiği için her sayfada diğer sayfaların içeriğinin yaklaşık %90'ını gönderir. Bunu %0'a indirmek zahmetli manuel ad alanı ayrımı gerektirir; Intlayer ise bunu varsayılan olarak sunar.
• Bileşen boyutu. useTranslations() çağıran bir bileşen ortalama 21.8 KB derlenirken, useIntlayer() kullanan aynı bileşen sadece 6.9 KB tutar.

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

TanStack Start (use-intl) Sonuçları

use-intl, next-intl'in framework bağımsız çekirdeğidir. Aynı API, aynı mesaj formatı. TanStack Start üzerinde intlayer ile karşılaştırmak, denklemin Next.js'e özgü kısımlarını ortadan kaldırır.

Sonuçlar nasıl okunmalı?

• Basit use-intl kurulumu, temel uygulamaya göre sayfa başına 68.8 KB daha fazla JS iletir.
• dynamic modda use-intl 119.4 KB değerine inse de %89.8 sayfa sızıntısını sürdürür.
• Mimari fark en çok bileşen boyutunda göze çarpar: use-intl ile 76-87 KB, Intlayer ile 6-8 KB.
• Dil değiştirme hızı Intlayer ile 2-4 kat daha seridir (3 ms vs 7-21 ms).

Tam tablo TanStack Start kıyaslama raporunda.

Neden bu fark var? Merkezi kataloglar vs derlenmiş sözlükler

next-intl geleneksel modeli izler: dil başına bir JSON, getRequestConfig içinde yüklenir, NextIntlClientProvider'a aktarılır ve t("namespace.key") ile okunur.

.
├── messages
│   ├── en.json
│   └── fr.json
└── src
    ├── i18n
    │   ├── request.ts
    │   └── routing.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── about
                └── page.tsx

Çalışma zamanı bir sayfanın hangi anahtarları kullanacağını bilemez, bu yüzden tüm kataloğu göndermek en güvenli yoldur.

Bunu başaramamanın maliyeti aynı anda iki eksende büyür: sayfalar ve yerel ayarlar:

Intlayer bu sorumluluğu tersine çevirir. İçerik doğrudan ilgili bileşenin yanında tanımlanır:

.
├── intlayer.config.ts
└── src
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── about
                ├── page.tsx
                └── page.content.ts
    └── components
        └── Counter
            ├── index.tsx
            └── index.content.ts

Derleme sırasında derleyici, hangi bileşenin hangi sözlüğü içe aktardığını tespit eder ve yalnızca etkin dil için gereken sözlükleri paketler.

dynamic satırının verilerini elde etmek için intlayer.config.ts dosyasında dictionary.importMode: 'dynamic' ayarını yapın. Paket optimizasyonu belgesine göz atın.

Geliştirici deneyimi

İstemci bileşeni (Client component)

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

"use client";

import { useState } from "react";
import { useTranslations, useFormatter } from "next-intl";

export const Counter = () => {
  const t = useTranslations("counter");
  const format = useFormatter();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{format.number(count)}</p>
      <button aria-label={t("label")} onClick={() => setCount((c) => c + 1)}>
        {t("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şenleri

Tasarım sistemi bileşenleri (navbar, footer, kartlar) genellikle istemci bileşenlerinin alt öğeleri olarak işlenen sunucu bileşenleridir, dolayısıyla async olamazlar.

type ServerCounterProps = {
  t: (key: string) => string;
  formattedCount: string;
};

export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
  <div>
    <p>{formattedCount}</p>
    <button aria-label={t("label")}>{t("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>
  );
};

Meta veriler (Metadata)

import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { routing } from "@/i18n/routing";

const localizedPath = (locale: string, path: string) =>
  locale === routing.defaultLocale ? path : `/${locale}${path}`;

export const generateMetadata = async ({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> => {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "about" });

  const languages = Object.fromEntries(
    routing.locales.map((l) => [l, localizedPath(l, "/about")])
  );

  return {
    title: t("title"),
    description: t("description"),
    alternates: {
      canonical: localizedPath(locale, "/about"),
      languages: { ...languages, "x-default": "/about" },
    },
  };
};

import { getIntlayer, getMultilingualUrls } from "intlayer";
import type { Metadata } from "next";
import type { LocalPromiseParams } from "next-intlayer";

export const generateMetadata = async ({
  params,
}: LocalPromiseParams): Promise<Metadata> => {
  const { locale } = await params;
  const metadata = getIntlayer("about-metadata", locale);
  const multilingualUrls = getMultilingualUrls("/about");

  return {
    ...metadata,
    alternates: {
      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],
      languages: { ...multilingualUrls, "x-default": "/about" },
    },
  };
};

next-intl API'sini koruyun, Intlayer verimini elde edin

Yukarıdaki performans verilerine ulaşmak için bileşenlerinizi sıfırdan yazmanız gerekmez. @intlayer/next-intl doğrudan tak-çalıştır bir adaptördür: useTranslations, getTranslations, useFormatter, t.rich() ve ICU çoğul yapılarını korur, bunları Intlayer derleyicisi tarafından derlenen Intlayer sözlüklerinden sunar.

import type { NextConfig } from "next";
import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";

const withIntlayer = createNextIntlPlugin();

const nextConfig: NextConfig = {};

export default withIntlayer(nextConfig);

Testlerde, aynı uygulamanın uyumluluk derlemesi, uygulama koduna dokunulmadan sayfa başına 153.6 KB'den 147.5 KB'ye, bileşen başına 21.8 KB'den 8.1 KB'ye ve sayfa sızıntısında %90'dan %0'a geriledi. Mevcut messages/{locale}.json dosyalarınız JSON eşitleme eklentisi ile tek doğruluk kaynağı olarak kalabilir.

Ayrıntılı adımlar için next-intl geçiş kılavuzuna göz atın.

Hangisi ne zaman tercih edilmeli?

SSS

İlgili karşılaştırmalar

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

next-intl hakkında daha fazlası:

Referans belgeleri:

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ülaritesinin ve topluluk güveninin önemli bir göstergesidir.

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ç

next-intl, Next.js üzerinde güvenilir ve sağlam bir kütüphanedir. Ancak merkezi katalog modeli optimizasyon yükünü geliştiriciye bırakır: basit bir kurulum diğer sayfaların içeriğinin yaklaşık %90'ını sızdırır ve çalışma zamanının kendisi her sayfada +12.6 KB gzip ekler.

Intlayer bu yükü derleyiciye devreder. Bileşen başına sözlükler, dil başına tembel yükleme ve gereksiz içeriklerin temizlenmesi otomatik derleme çıktısıdır. Aynı uygulamadaki sonuç: sayfa başına +0.3 KB, %0 sızıntı, 3 kat daha küçük bileşenler ve TanStack Start üzerinde 2-4 kat daha hızlı dil değişimi.

Tüm ham veriler, test uygulamaları ve betikler Benchmark Bloom deposunda yer almaktadır.

Daha fazla ayrıntı için 'Neden Intlayer?' belgesine bakın.