@intlayer/docs 8.7.4 → 8.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  2. package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  3. package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  4. package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  5. package/blog/id/list_i18n_technologies/frameworks/svelte.md +0 -2
  6. package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  7. package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  8. package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  9. package/blog/pl/list_i18n_technologies/frameworks/svelte.md +0 -2
  10. package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  11. package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  12. package/blog/vi/list_i18n_technologies/frameworks/svelte.md +0 -2
  13. package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +0 -2
  14. package/dist/cjs/generated/docs.entry.cjs +60 -0
  15. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  16. package/dist/esm/generated/docs.entry.mjs +60 -0
  17. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  18. package/dist/types/generated/docs.entry.d.ts +3 -0
  19. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  20. package/docs/ar/benchmark/index.md +29 -0
  21. package/docs/ar/benchmark/nextjs.md +227 -0
  22. package/docs/ar/benchmark/tanstack.md +193 -0
  23. package/docs/ar/intlayer_with_tanstack.md +0 -2
  24. package/docs/de/benchmark/index.md +29 -0
  25. package/docs/de/benchmark/nextjs.md +227 -0
  26. package/docs/de/benchmark/tanstack.md +193 -0
  27. package/docs/en/benchmark/___NOTE.md +82 -0
  28. package/docs/en/benchmark/___nextjs.md +195 -0
  29. package/docs/en/benchmark/___tanstack.md +187 -0
  30. package/docs/en/benchmark/index.md +29 -0
  31. package/docs/en/benchmark/nextjs.md +228 -0
  32. package/docs/en/benchmark/tanstack.md +217 -0
  33. package/docs/en-GB/benchmark/index.md +29 -0
  34. package/docs/en-GB/benchmark/nextjs.md +228 -0
  35. package/docs/en-GB/benchmark/tanstack.md +193 -0
  36. package/docs/es/benchmark/index.md +29 -0
  37. package/docs/es/benchmark/nextjs.md +226 -0
  38. package/docs/es/benchmark/tanstack.md +193 -0
  39. package/docs/fr/benchmark/index.md +29 -0
  40. package/docs/fr/benchmark/nextjs.md +227 -0
  41. package/docs/fr/benchmark/tanstack.md +193 -0
  42. package/docs/hi/benchmark/index.md +29 -0
  43. package/docs/hi/benchmark/nextjs.md +227 -0
  44. package/docs/hi/benchmark/tanstack.md +193 -0
  45. package/docs/id/benchmark/index.md +29 -0
  46. package/docs/id/benchmark/nextjs.md +227 -0
  47. package/docs/id/benchmark/tanstack.md +193 -0
  48. package/docs/id/intlayer_with_react_native+expo.md +0 -2
  49. package/docs/it/benchmark/index.md +29 -0
  50. package/docs/it/benchmark/nextjs.md +227 -0
  51. package/docs/it/benchmark/tanstack.md +193 -0
  52. package/docs/ja/benchmark/index.md +29 -0
  53. package/docs/ja/benchmark/nextjs.md +227 -0
  54. package/docs/ja/benchmark/tanstack.md +193 -0
  55. package/docs/ko/benchmark/index.md +29 -0
  56. package/docs/ko/benchmark/nextjs.md +227 -0
  57. package/docs/ko/benchmark/tanstack.md +193 -0
  58. package/docs/ko/intlayer_with_tanstack.md +0 -2
  59. package/docs/pl/benchmark/index.md +29 -0
  60. package/docs/pl/benchmark/nextjs.md +227 -0
  61. package/docs/pl/benchmark/tanstack.md +193 -0
  62. package/docs/pt/benchmark/index.md +29 -0
  63. package/docs/pt/benchmark/nextjs.md +227 -0
  64. package/docs/pt/benchmark/tanstack.md +193 -0
  65. package/docs/ru/benchmark/index.md +29 -0
  66. package/docs/ru/benchmark/nextjs.md +227 -0
  67. package/docs/ru/benchmark/tanstack.md +193 -0
  68. package/docs/tr/benchmark/index.md +29 -0
  69. package/docs/tr/benchmark/nextjs.md +227 -0
  70. package/docs/tr/benchmark/tanstack.md +193 -0
  71. package/docs/uk/benchmark/index.md +29 -0
  72. package/docs/uk/benchmark/nextjs.md +227 -0
  73. package/docs/uk/benchmark/tanstack.md +193 -0
  74. package/docs/vi/benchmark/index.md +29 -0
  75. package/docs/vi/benchmark/nextjs.md +227 -0
  76. package/docs/vi/benchmark/tanstack.md +193 -0
  77. package/docs/zh/benchmark/index.md +29 -0
  78. package/docs/zh/benchmark/nextjs.md +227 -0
  79. package/docs/zh/benchmark/tanstack.md +193 -0
  80. package/package.json +6 -6
  81. package/src/generated/docs.entry.ts +60 -0
@@ -0,0 +1,227 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: 2026'da Next.js için En İyi i18n Çözümü - Benchmark Raporu
5
+ description: next-intl, next-i18next ve Intlayer gibi Next.js uluslararasılaştırma (i18n) kütüphanelerini karşılaştırın. Paket boyutu, sızıntı ve reaktivite üzerine ayrıntılı performans raporu.
6
+ keywords:
7
+ - benchmark
8
+ - i18n
9
+ - intl
10
+ - nextjs
11
+ - performans
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - benchmark
16
+ - nextjs
17
+ author: Aymeric PINEAU
18
+ applicationTemplate: https://github.com/intlayer-org/benchmark-i18n
19
+ history:
20
+ - version: 8.7.5
21
+ date: 2026-01-06
22
+ changes: "Benchmark başlatıldı"
23
+ ---
24
+
25
+ # Next.js i18n Kütüphaneleri — 2026 Benchmark Raporu
26
+
27
+ Bu sayfa, Next.js üzerindeki i18n çözümleri için hazırlanan bir kıyaslama (benchmark) raporudur.
28
+
29
+ ## İçindekiler
30
+
31
+ <Toc/>
32
+
33
+ ## Etkileşimli Benchmark
34
+
35
+ <I18nBenchmark framework="nextjs" vertical/>
36
+
37
+ ## Sonuçlar Referansı:
38
+
39
+ <iframe
40
+ src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
41
+ width="100%"
42
+ height="600px"
43
+ style="border:none;">
44
+ </iframe>
45
+
46
+ > https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md
47
+
48
+ Benchmark deposunun tamamını [buradan](https://github.com/intlayer-org/benchmark-i18n) inceleyebilirsiniz.
49
+
50
+ ## Giriş
51
+
52
+ Uluslararasılaştırma kütüphanelerinin uygulamanız üzerinde ağır bir etkisi vardır. Ana risk, kullanıcı tek bir sayfayı ziyaret ettiğinde her sayfa ve her dil için içerik yüklenmesidir.
53
+
54
+ Uygulamanız büyüdükçe, paket boyutu eksponansiyel olarak artabilir ve bu durum performansı fark edilir şekilde düşürebilir.
55
+
56
+ Örnek olarak, en kötü durumlarda, uluslararasılaştırıldıktan sonra sayfanız neredeyse 4 kat daha büyük hale gelebilir.
57
+
58
+ i18n kütüphanelerinin bir başka etkisi de geliştirme sürecinin yavaşlamasıdır. Bileşenleri farklı dillerde çok dilli içeriğe dönüştürmek zaman alıcı bir iştir.
59
+
60
+ Sorun zor olduğu için birçok çözüm mevcuttur; bazıları DX'e (geliştirici deneyimi) odaklanırken, diğerleri performans veya ölçeklenebilirliğe odaklanır.
61
+
62
+ Intlayer tüm bu boyutlarda optimizasyon yapmaya çalışır.
63
+
64
+ ## Uygulamanızı Test Edin
65
+
66
+ Bu sorunları ortaya çıkarmak için [buradan](https://intlayer.org/i18n-seo-scanner) deneyebileceğiniz ücretsiz bir tarayıcı oluşturdum.
67
+
68
+ <iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
69
+
70
+ ## Sorun
71
+
72
+ Çok dilli bir uygulamanın paketiniz üzerindeki etkisini sınırlamanın iki ana yolu vardır:
73
+
74
+ - JSON'unuzu (veya içeriğinizi) dosyalar / değişkenler / ad alanları (namespaces) arasında bölmek, böylece paketleyici (bundler), belirli bir sayfa için kullanılmayan içeriği "tree-shake" yaparak temizleyebilir.
75
+ - Sayfa içeriğinizi dinamik olarak yalnızca kullanıcının dilinde yüklemek.
76
+
77
+ Bu yaklaşımların teknik sınırları:
78
+
79
+ **Dinamik yükleme**
80
+
81
+ Webpack veya Turbopack ile `[locale]/page.tsx` gibi rotalar tanımlasanız ve `generateStaticParams` tanımlanmış olsa bile, paketleyici `locale` değişkenini statik bir sabit olarak görmez. Bu durum, her sayfaya tüm dillerdeki içeriklerin dahil edilmesine neden olabilir. Bunu sınırlamanın ana yolu, içeriği dinamik bir içe aktarma (örneğin `import('./locales/${locale}.json')`) aracılığıyla yüklemektir.
82
+
83
+ Derleme sırasında Next.js her yerel ayar (locale) için bir JS paketi (örneğin `./locales_fr_12345.js`) oluşturur. Site istemciye gönderildikten sonra sayfa çalıştığında, tarayıcı gereken JS dosyası için ek bir HTTP isteği yapar.
84
+
85
+ > Aynı sorunu çözmenin başka bir yolu da JSON'u dinamik olarak yüklemek için `fetch()` kullanmaktır. `Tolgee`, JSON dosyaları `/public` altında olduğunda bu şekilde çalışır. İçerik yüklemek için `getStaticProps` kullanan `next-translate` de benzer bir mantığa sahiptir. Akış aynıdır: Tarayıcı, varlığı yüklemek için ek bir HTTP isteği yapar.
86
+
87
+ **İçerik bölme (Content splitting)**
88
+
89
+ `const t = useTranslation()` + `t('nesnem.alt-nesnem.anahtarim')` gibi bir sözdizimi kullanıyorsanız, kütüphanenin anahtarı çözümleyebilmesi için genellikle tüm JSON dosyasının pakette olması gerekir. Bu durumda, sayfada kullanılmasa bile içeriğin büyük bir kısmı gönderilir.
90
+
91
+ Bunu hafifletmek için bazı kütüphaneler sayfa başına hangi ad alanlarının yükleneceğini belirtmenizi ister — örneğin `next-i18next`, `next-intl`, `lingui`, `next-translate`, `next-international`.
92
+
93
+ Buna karşılık `Paraglide`, derlemeden önce JSON'u `const en_my_var = () => 'değerim'` gibi düz sembollere dönüştürmek için ek bir adım ekler. Teorik olarak bu, sayfadaki kullanılmayan içeriğin tree-shake edilmesini sağlar. Göreceğimiz gibi bu yöntemin hala ödün vermesi gereken yanları vardır.
94
+
95
+ Son olarak `Intlayer`, derleme zamanı (build-time) optimizasyonu uygulayarak `useIntlayer('key')` ifadesinin doğrudan ilgili içerikle değiştirilmesini sağlar.
96
+
97
+ ## Metodoloji
98
+
99
+ Bu benchmark için aşağıdaki kütüphaneleri karşılaştırdık:
100
+
101
+ - `Base App` (i18n kütüphanesi yok)
102
+ - `next-intlayer` (v8.7.5)
103
+ - `next-i18next` (v16.0.5)
104
+ - `next-intl` (v4.9.1)
105
+ - `@lingui/core` (v5.3.0)
106
+ - `next-translate` (v3.1.2)
107
+ - `next-international` (v1.3.1)
108
+ - `@inlang/paraglide-js` (v2.15.1)
109
+ - `tolgee` (v7.0.0)
110
+ - `@lingo.dev/compiler` (v0.4.0)
111
+ - `wuchale` (v0.22.11)
112
+ - `gt-next` (v6.16.5)
113
+
114
+ Next.js'in `16.2.4` sürümünü App Router ile kullandım.
115
+
116
+ **10 sayfa** ve **10 dilden** oluşan çok dilli bir uygulama geliştirdim.
117
+
118
+ **Dört yükleme stratejisini** karşılaştırdım:
119
+
120
+ | Strateji | Ad alanı yok (global) | Ad alanı var (scoped) |
121
+ | :------------------ | :-------------------------------------------- | :----------------------------------------------------------------- |
122
+ | **Statik yükleme** | **Static**: Başlangıçta her şey bellekte. | **Scoped static**: Ad alanına bölünmüş; her şey başlangıçta yüklü. |
123
+ | **Dinamik yükleme** | **Dynamic**: İstek üzerine dile göre yükleme. | **Scoped dynamic**: Ad alanına ve dile göre ayrıntılı yükleme. |
124
+
125
+ ## Strateji özeti
126
+
127
+ - **Static**: Basit; ilk yüklemeden sonra ağ gecikmesi yok. Dezavantajı: büyük paket boyutu.
128
+ - **Dynamic**: Başlangıç ağırlığını azaltır (lazy-loading). Çok sayıda dile sahip olduğunuzda idealdir.
129
+ - **Scoped static**: Karmaşık ek ağ istekleri olmadan kodu düzenli tutar (mantıksal ayrım).
130
+ - **Scoped dynamic**: Kod bölme (code-splitting) ve performans için en iyi yaklaşım. Yalnızca geçerli görünümün ve aktif dilin ihtiyaç duyduğu şeyi yükleyerek bellek kullanımını en aza indirir.
131
+
132
+ ### Neleri ölçtüm:
133
+
134
+ Her teknoloji yığını için aynı çok dilli uygulamayı gerçek bir tarayıcıda çalıştırdım, ardından ağ üzerinden gerçekte ne gönderildiğini ve işlemlerin ne kadar sürdüğünü kaydettim. Boyutlar, ham kaynak kod miktarından ziyade kullanıcıların gerçekte indirdiği boyuta daha yakın olduğu için **normal web sıkıştırmasından sonraki** değerler olarak raporlanmıştır.
135
+
136
+ - **Uluslararasılaştırma kütüphanesi boyutu**: Paketleme, tree-shaking ve küçültme işlemlerinden sonra i18n kütüphanesinin boyutu; yani boş bir bileşendeki sağlayıcılar (örneğin `NextIntlClientProvider`) + hook'lar (örneğin `useTranslations`) kodunun boyutudur. Çeviri dosyalarının yüklenmesini içermez. İçeriğiniz devreye girmeden önce kütüphanenin ne kadar "ağır" olduğunu gösterir.
137
+
138
+ - **Sayfa başına JavaScript**: Benchmark rotasının her biri için tarayıcının o ziyaret için çektiği script miktarı; paketteki sayfaların (ve raporun bunları birleştirdiği dillerdeki) ortalamasıdır. Ağır sayfalar yavaş sayfalardır.
139
+
140
+ - **Diğer dillerden sızıntı (Leakage from other locales)**: Aynı sayfanın ancak başka bir dildeki içeriğinin, incelenen sayfada yanlışlıkla yüklenmesidir. Bu içerik gereksizdir ve kaçınılmalıdır (örneğin `/en/about` sayfası paketinde bulunan `/fr/about` sayfası içeriği).
141
+
142
+ - **Diğer rotalardan sızıntı**: Uygulamadaki **diğer ekranlar** için aynı kavram: sadece bir sayfa açtığınızda diğer sayfaların metinlerinin gelip gelmediği (örneğin `/en/contact` sayfası paketindeki `/en/about` sayfası içeriği). Yüksek puan, zayıf bölme veya aşırı geniş paketlere işaret eder.
143
+
144
+ - **Ortalama bileşen paket boyutu**: Ortak UI parçaları, tek bir devasa uygulama numarası içinde saklanmak yerine **tek tek** ölçülür. Uluslararasılaştırmanın günlük bileşenleri sessizce şişirip şişirmediğini gösterir. Örneğin, bileşeniniz yeniden render edilirse tüm bu verileri bellekten yükleyecektir. Herhangi bir bileşene devasa bir JSON eklemek, bileşenlerinizin performansını yavaşlatacak büyük bir kullanılmayan veri deposu bağlamak gibidir.
145
+
146
+ - **Dil değiştirme reaktivity'si**: Uygulamanın kendi kontrolünü kullanarak dili değiştiriyorum ve sayfa net bir şekilde değişene kadar geçen süreyi tutuyorum; bir laboratuvar mikro-adımı değil, ziyaretçinin fark edeceği süredir.
147
+
148
+ - **Dil değişikliğinden sonra render çalışması**: Daha dar kapsamlı bir takip: geçiş başladıktan sonra arayüzün yeni dil için yeniden çizilmesinin ne kadar çaba gerektirdiği. "Hissedilen" zaman ile framework maliyeti farklılaştığında kullanışlıdır.
149
+
150
+ - **İlk sayfa yükleme süresi**: Navigasyondan tarayıcının sayfayı tamamen yüklendi kabul etmesine kadar geçen süredir. Soğuk başlangıçları (cold starts) karşılaştırmak için iyidir.
151
+
152
+ - **Hidrasyon (Hydration) süresi**: Uygulama bunu sunduğunda, istemcinin sunucu HTML'ini gerçekten tıklanabilir bir şeye dönüştürmek için harcadığı süre. Tablolardaki tire işareti (-), bu uygulamanın benchmark içinde güvenilir bir hidrasyon figürü sağlamadığı anlamına gelir.
153
+
154
+ ## Sonuçlar Detaylı
155
+
156
+ ### 1 — Kaçınılması gereken çözümler
157
+
158
+ `gt-next` veya `lingo.dev` gibi bazı çözümlerden açıkça kaçınılmalıdır. Bu çözümler, satıcı kısıtlamasını (vendor lock-in) kod tabanınızı kirletmekle birleştirir. Uygulamak için saatler harcanmasına rağmen, ne TanStack Start'ta ne de Next.js'te düzgün çalıştıklarını göremedim.
159
+
160
+ Karşılaşılan sorunlar:
161
+
162
+ **(General Translation)** (`gt-next@6.16.5`):
163
+
164
+ - 110kb'lık bir uygulama için `gt-react` 440kb'tan fazla ek veri ekler.
165
+ - General Translation ile yapılan ilk derlemede `Quota Exceeded, please upgrade your plan` mesajı.
166
+ - Çeviriler render edilmiyor; kütüphanede bir hata gibi görünen `Error: <T> used on the client-side outside of <GTProvider>` hatası alıyorum.
167
+ - **gt-tanstack-start-react** uygulanırken kütüphaneyle ilgili bir [sorun](https://github.com/generaltranslation/gt/issues/1210#event-24510646961) ile de karşılaştım: `does not provide an export named 'printAST' - @formatjs/icu-messageformat-parser` hatası uygulamayı bozdu. Sorun bildirildikten sonra 24 saat içinde düzeltildi.
168
+ - Kütüphane Next.js sayfalarının statik render edilmesini engelliyor.
169
+
170
+ **(Lingo.dev)** (`@lingo.dev/compiler@0.4.0`):
171
+
172
+ - AI kotası aşıldı ve derleme tamamen engellendi; yani ödeme yapmadan doğrudan yayına giremezsiniz.
173
+ - Derleyici, çevrilmiş içeriğin neredeyse %40'ını kaçırıyordu. Çalışması için tüm `.map` yapılarını düz bileşen bloklarına yeniden yazmak zorunda kaldım.
174
+ - CLI'ları oldukça hatalı ve yapılandırma dosyasını sebepsiz yere sıfırlıyordu.
175
+ - Derleme sırasında, yeni içerik eklendiğinde oluşturulan JSON'ları tamamen siliyordu. Sonuç olarak, birkaç anahtar 300'den fazla mevcut anahtarı yok edebiliyordu.
176
+
177
+ ### 2 — Deneysel çözümler
178
+
179
+ **(Wuchale)** (`wuchale@0.22.11`):
180
+
181
+ `Wuchale`'nin arkasındaki fikir ilginç ancak henüz uygulanabilir değil. Reaktivite sorunlarıyla karşılaştım ve uygulamayı çalıştırabilmek için sağlayıcının (provider) zorla yeniden render edilmesini gerektirdi. Dokümantasyon da oldukça belirsiz, bu da alışma sürecini zorlaştırıyor.
182
+
183
+ **(Paraglide)** (`@inlang/paraglide-js@2.15.1`):
184
+
185
+ `Paraglide` yenilikçi ve iyi düşünülmüş bir yaklaşım sunuyor. Buna rağmen, bu benchmark'ta reklamı yapılan tree-shaking benim Next.js veya TanStack Start kurulumlarımda çalışmadı. İş akışı ve DX diğer seçeneklerden daha karmaşık.
186
+ Şahsen her push öncesinde JS dosyalarını yeniden oluşturmak zorunda kalmaktan hoşlanmıyorum, bu da PR'ler üzerinden sürekli merge çelişkisi riski yaratıyor. Araç ayrıca Next.js'ten ziyade Vite'e daha fazla odaklanmış gibi görünüyor.
187
+ Son olarak, diğer çözümlerle karşılaştırıldığında Paraglide, içeriği render etmek için mevcut dili almak üzere bir store (örneğin React context) kullanmaz. Ayrıştırılan her düğüm için localStorage / cookie vb. üzerinden dili sorgular. Bu, bileşen reaktivitesini etkileyen gereksiz mantık yürütülmesine yol açar.
188
+
189
+ ### 3 — Kabul edilebilir çözümler
190
+
191
+ **(Tolgee)** (`tolgee@7.0.0`):
192
+
193
+ `Tolgee` daha önce bahsedilen sorunların çoğunu ele alıyor. Benzer araçlara göre benimsenmesinin daha zor olduğunu gördüm. Tip güvenliği (type safety) sağlamıyor, bu da eksik anahtarların derleme zamanında yakalanmasını zorlaştırıyor. Eksik anahtar algılama özelliği eklemek için Tolgee'nin fonksiyonlarını kendi fonksiyonlarımla sarmak zorunda kaldım.
194
+
195
+ **(Next Intl)** (`next-intl@4.9.1`):
196
+
197
+ `next-intl` şu anki en popüler seçenek ve AI asistanlarının en çok önerdiği kütüphane; ancak bence performans odaklı bakıldığında bu yanlış bir öneri. Başlamak kolaydır; pratikte sızıntıyı sınırlamak için optimizasyon karmaşıktır. Dinamik yükleme + ad alanı oluşturma + TypeScript tiplerini birleştirmek geliştirmeyi çok yavaşlatır. Paket de oldukça ağırdır ( `NextIntlClientProvider` + `useTranslations` için yaklaşık 13kb, bu `next-intlayer`ın 2 katından fazlasıdır). **next-intl** eskiden Next.js sayfalarının statik render edilmesini engelliyordu. `setRequestLocale()` adında bir yardımcı sunar. Bu, `en.json` / `fr.json` gibi merkezi dosyalar için kısmen çözülmüş gibi görünse de, içerik `en/shared.json` / `fr/shared.json` / `es/shared.json` gibi ad alanlarına bölündüğünde statik render hala bozuluyor.
198
+
199
+ **(Next I18next)** (`next-i18next@16.0.5`):
200
+
201
+ `next-i18next` muhtemelen en popüler seçenektir çünkü JavaScript uygulama i18n çözümleri arasında ilklerden biridir. Birçok topluluk eklentisine sahiptir. `next-intl` ile aynı büyük dezavantajlara sahiptir. Paket özellikle ağırdır ( `I18nProvider` + `useTranslation` için yaklaşık 18kb, `next-intlayer`ın yaklaşık 3 katı).
202
+
203
+ Mesaj formatları da farklıdır: `next-intl` ICU MessageFormat kullanırken, `i18next` kendi formatını kullanır.
204
+
205
+ **(Next International)** (`next-international@1.3.1`):
206
+
207
+ `next-international` da yukarıdaki sorunları ele alıyor ancak `next-intl` veya `next-i18next`ten çok da farklı değil. Ad alanına özel çeviriler için `scopedT()` içeriyor, ancak bunu kullanmanın paket boyutu üzerinde neredeyse hiç etkisi yok.
208
+
209
+ **(Lingui)** (`@lingui/core@5.3.0`):
210
+
211
+ `Lingui` sık sık övülür. Şahsen `lingui extract` / `lingui compile` iş akışını alternatiflerden daha karmaşık buldum ve net bir avantaj göremedim. Ayrıca AI'ları şaşırtan tutarsız sözdizimleri fark ettim (örneğin `t()`, `t''`, `i18n.t()`, `<Trans>`).
212
+
213
+ ### 4 — Öneriler
214
+
215
+ **(Next Translate)** (`next-translate@3.1.2`):
216
+
217
+ `t()` stili bir API seviyorsanız `next-translate` ana önerimdir. `next-translate-plugin` aracılığıyla zarif bir şekilde çalışır ve Webpack / Turbopack yükleyicisi ile `getStaticProps` üzerinden ad alanlarını yükler. Ayrıca buradaki en hafif seçenektir (~2.5kb). Yapılandırmada sayfa veya rota başına ad alanı tanımlamak iyi düşünülmüştür ve **next-intl** veya **next-i18next** gibi ana alternatiflerden daha kolay bakımı yapılır. `3.1.2` sürümünde statik render'ın çalışmadığını ve Next.js'in dinamik render'a geri döndüğünü fark ettim.
218
+
219
+ **(Intlayer)** (`next-intlayer@8.7.5`):
220
+
221
+ Nesnellik adına kendi çözümüm olan `next-intlayer` hakkında kişisel olarak yorum yapmayacağım.
222
+
223
+ ### Kişisel Not
224
+
225
+ Bu not kişiseldir ve benchmark sonuçlarını etkilemez. i18n dünyasında, çevrilmiş içerik için genellikle `const t = useTranslation('xx')` + `<>{t('xx.xx')}</>` gibi bir desen etrafında fikir birliği görülür.
226
+
227
+ React uygulamalarında, bir React düğümü (ReactNode) olarak bir fonksiyon enjekte etmek bence bir antipatendir. Ayrıca, kaçınılabilir bir karmaşıklık ve (zar zor fark edilse bile) JavaScript yürütme yükü ekler.
@@ -0,0 +1,193 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: 2026'da TanStack Start için En İyi i18n Çözümü - Benchmark Raporu
5
+ description: react-i18next, use-intl ve Intlayer gibi TanStack Start uluslararasılaştırma kütüphanelerini karşılaştırın. Paket boyutu, sızıntı ve reaktivite üzerine ayrıntılı performans raporu.
6
+ keywords:
7
+ - benchmark
8
+ - i18n
9
+ - intl
10
+ - tanstack
11
+ - performans
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - benchmark
16
+ - tanstack
17
+ author: Aymeric PINEAU
18
+ applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-tanstack-start-template
19
+ history:
20
+ - version: 8.7.5
21
+ date: 2026-01-06
22
+ changes: "Benchmark başlatıldı"
23
+ ---
24
+
25
+ # TanStack Start i18n Kütüphaneleri — 2026 Benchmark Raporu
26
+
27
+ Bu sayfa, TanStack Start üzerindeki i18n çözümleri için hazırlanan bir kıyaslama (benchmark) raporudur.
28
+
29
+ ## İçindekiler
30
+
31
+ <Toc/>
32
+
33
+ ## Etkileşimli Benchmark
34
+
35
+ <I18nBenchmark framework="tanstack" vertical/>
36
+
37
+ ## Sonuçlar Referansı:
38
+
39
+ <iframe
40
+ src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
41
+ width="100%"
42
+ height="600px"
43
+ style="border:none;">
44
+ </iframe>
45
+
46
+ > https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md
47
+
48
+ Benchmark deposunun tamamını [buradan](https://github.com/intlayer-org/benchmark-i18n/tree/main) inceleyebilirsiniz.
49
+
50
+ ## Giriş
51
+
52
+ Uluslararasılaştırma çözümleri, bir React uygulamasındaki en ağır bağımlılıklardan biridir. TanStack Start'ta ana risk, gereksiz içerik gönderilmesidir: tek bir rotanın paketinde diğer sayfaların ve diğer yerel ayarların (locale) çevirilerinin bulunması.
53
+
54
+ Siteniz büyüdükçe, bu sorun istemciye gönderilen JavaScript miktarını hızla artırabilir ve navigasyonu yavaşlatabilir.
55
+
56
+ Pratikte, en az optimize edilmiş uygulamalar için uluslararasılaştırılmış bir sayfa, i18n bulunmayan sürüme göre birkaç kat daha ağır olabilir.
57
+
58
+ Diğer bir etki ise geliştirici deneyimidir (DX): içeriği nasıl tanımladığınız, tipler, ad alanı (namespace) organizasyonu, dinamik yükleme ve yerel ayar değiştiğinde verilen reaktif yanıt.
59
+
60
+ ## Uygulamanızı Test Edin
61
+
62
+ i18n sızıntısı (leakage) sorunlarını hızlıca tespit etmek için [buradan](https://intlayer.org/i18n-seo-scanner) erişilebilen ücretsiz bir tarayıcı hazırladım.
63
+
64
+ <iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
65
+
66
+ ## Sorun
67
+
68
+ Çok dilli bir uygulamanın maliyetini sınırlamak için iki kaldıraç esastır:
69
+
70
+ - İçeriği sayfa / ad alanı bazında bölün, böylece ihtiyacınız olmadığında tüm sözlükleri yüklemezsiniz.
71
+ - Doğru yerel ayarı yalnızca gerektiğinde dinamik olarak yükleyin.
72
+
73
+ Bu yaklaşımların teknik sınırlarını anlamak:
74
+
75
+ **Dinamik yükleme**
76
+
77
+ Dinamik yükleme olmadan, çoğu çözüm mesajları ilk render'dan itibaren bellekte tutar ve bu da çok sayıda rota ve yerel ayara sahip uygulamalar için önemli bir ek yük oluşturur.
78
+
79
+ Dinamik yükleme ile bir ödün vermeyi kabul edersiniz: daha az başlangıç JS'i, ancak bazen dil değiştirirken ek bir istek.
80
+
81
+ **İçerik bölme (Content splitting)**
82
+
83
+ `const t = useTranslation()` + `t('a.b.c')` etrafında oluşturulan sözdizimleri çok kullanışlıdır ancak genellikle çalışma zamanında büyük JSON nesnelerinin tutulmasını teşvik eder. Kütüphane gerçek bir sayfa başına bölme stratejisi sunmadığı sürece bu model tree-shaking işlemini zorlaştırır.
84
+
85
+ ## Metodoloji
86
+
87
+ Bu benchmark için aşağıdaki kütüphaneleri karşılaştırdık:
88
+
89
+ - `Base App` (i18n kütüphanesi yok)
90
+ - `react-intlayer` (v8.7.5-canary.0)
91
+ - `react-i18next` (v17.0.2)
92
+ - `use-intl` (v4.9.1)
93
+ - `@lingui/core` (v5.3.0)
94
+ - `@inlang/paraglide-js` (v2.15.1)
95
+ - `tolgee` (v7.0.0)
96
+ - `react-intl` (v10.1.1)
97
+ - `wuchale` (v0.22.11)
98
+ - `gt-react` (vlatest)
99
+ - `lingo.dev` (v0.133.9)
100
+
101
+ Framework, **10 sayfa** ve **10 dilden** oluşan çok dilli bir uygulamaya sahip `TanStack Start`tır.
102
+
103
+ **Dört yükleme stratejisini** karşılaştırdık:
104
+
105
+ | Strateji | Ad alanı yok (global) | Ad alanı var (scoped) |
106
+ | :------------------ | :-------------------------------------------- | :----------------------------------------------------------------- |
107
+ | **Statik yükleme** | **Static**: Başlangıçta her şey bellekte. | **Scoped static**: Ad alanına bölünmüş; her şey başlangıçta yüklü. |
108
+ | **Dinamik yükleme** | **Dynamic**: İstek üzerine dile göre yükleme. | **Scoped dynamic**: Ad alanına ve dile göre ayrıntılı yükleme. |
109
+
110
+ ## Strateji özeti
111
+
112
+ - **Static**: Basit; ilk yüklemeden sonra ağ gecikmesi yok. Dezavantajı: büyük paket boyutu.
113
+ - **Dynamic**: Başlangıç ağırlığını azaltır (lazy-loading). Çok sayıda yerel ayara sahip olduğunuzda idealdir.
114
+ - **Scoped static**: Karmaşık ek ağ istekleri olmadan kodu düzenli tutar (mantıksal ayrım).
115
+ - **Scoped dynamic**: Kod bölme (code-splitting) ve performans için en iyi yaklaşım. Yalnızca geçerli görünümün ve aktif dilin ihtiyaç duyduğu şeyi yükleyerek bellek kullanımını en aza indirir.
116
+
117
+ ## Sonuçlar Detaylı
118
+
119
+ ### 1 — Kaçınılması gereken çözümler
120
+
121
+ `gt-react` veya `lingo.dev` gibi bazı çözümler den kaçınılması gereken seçeneklerdir. Bu çözümler satıcı kısıtlamasını kod tabanınızı kirletmekle birleştirir. Daha da kötüsü: uygulamak için saatler harcanmasına rağmen TanStack Start üzerinde düzgün çalıştıklarını göremedim (Next.js'teki `gt-next`e benzer şekilde).
122
+
123
+ Karşılaşılan sorunlar:
124
+
125
+ **(General Translation)** (`gt-react@latest`):
126
+
127
+ - Yaklaşık 110kb'lık bir uygulama için `gt-react` 440kb'tan fazla ek veri ekleyebilir (aynı benchmark'taki Next.js uygulamasında görülen miktar).
128
+ - General Translation ile yapılan ilk derlemede `Quota Exceeded, please upgrade your plan` mesajı.
129
+ - Çeviriler render edilmiyor; kütüphanede bir hata gibi görünen `Error: <T> used on the client-side outside of <GTProvider>` hatası alıyorum.
130
+ - **gt-tanstack-start-react** uygulanırken kütüphaneyle ilgili bir [sorun](https://github.com/generaltranslation/gt/issues/1210#event-24510646961) ile de karşılaştım: `does not provide an export named 'printAST' - @formatjs/icu-messageformat-parser` hatası uygulamayı bozdu. Bildirildikten sonra 24 saat içinde düzeltildi.
131
+ - Bu kütüphaneler `initializeGT()` fonksiyonu aracılığıyla bir antipaten (anti-pattern) kullanarak paketin temiz bir şekilde tree-shake edilmesini engeller.
132
+
133
+ **(Lingo.dev)** (`lingo.dev@0.133.9`):
134
+
135
+ - AI kotası aşıldı (veya sunucu bağımlılığını engelliyor), bu da ödeme yapmadan derleme / yayınlamayı riskli hale getiriyor.
136
+ - Derleyici, çevrilmiş içeriğin neredeyse %40'ını kaçırıyordu. Çalışması için tüm `.map` yapılarını düz bileşen bloklarına yeniden yazmak zorunda kaldım.
137
+ - CLI'ları hatalı ve yapılandırma dosyasını sebepsiz yere sıfırlıyordu.
138
+ - Derleme sırasında, yeni içerik eklendiğinde oluşturulan JSON'ları tamamen siliyordu. Sonuç olarak, birkaç anahtarın yüzlerce mevcut anahtarı sildiği bir durumla karşılaşabilirsiniz.
139
+ - TanStack Start üzerinde kütüphane ile reaktivite sorunları yaşadım: yerel ayar değiştiğinde çalışması için sağlayıcının (provider) zorla yeniden render edilmesini gerektirdi.
140
+
141
+ ### 2 — Deneysel çözümler
142
+
143
+ **(Wuchale)** (`wuchale@0.22.11`):
144
+
145
+ `Wuchale`'nin arkasındaki fikir ilginç ancak henüz uygulanabilir bir çözüm değil. Reaktivite sorunlarıyla karşılaştım ve TanStack Start üzerinde uygulamanın çalışması için sağlayıcının zorla yeniden render edilmesini gerektirdi. Dokümantasyon da oldukça belirsiz, bu da alışma sürecini zorlaştırıyor.
146
+
147
+ ### 3 — Kabul edilebilir çözümler
148
+
149
+ **(Paraglide)** (`@inlang/paraglide-js@2.15.1`):
150
+
151
+ `Paraglide` yenilikçi ve iyi düşünülmüş bir yaklaşım sunuyor. Buna rağmen, bu benchmark'ta şirketlerinin reklamını yaptığı tree-shaking benim Next.js uygulamamda veya TanStack Start için çalışmadı. İş akışı ve DX de diğer seçeneklerden daha karmaşık. Şahsen her push öncesinde JS dosyalarını yeniden oluşturmak zorunda kalmaktan hoşlanmıyorum, bu da PR'ler üzerinden geliştiriciler için sürekli merge çelişkisi riski yaratıyor.
152
+
153
+ **(Tolgee)** (`tolgee@7.0.0`):
154
+
155
+ `Tolgee` daha önce bahsedilen sorunların çoğunu ele alıyor. Benzer yaklaşımlara sahip diğer araçlara göre başlamasının daha zor olduğunu gördüm. Tip güvenliği sağlamıyor, bu da eksik anahtarların derleme zamanında yakalanmasını çok zorlaştırıyor. Eksik anahtar algılama özelliği eklemek için Tolgee'nin API'larını kendi API'larımla sarmak zorunda kaldım.
156
+
157
+ TanStack Start üzerinde de reaktivite problemlerim oldu: yerel ayar değiştiğinde, sağlayıcıyı yeniden render etmeye zorlamam ve yerel ayar değişikliği olaylarına abone olmam gerekiyordu, böylece başka bir dildeki yükleme düzgün davrandı.
158
+
159
+ **(use-intl)** (`use-intl@4.9.1`):
160
+
161
+ `use-intl`, React ekosistemindeki en popüler "intl" parçasıdır ( `next-intl` ile aynı aileden) ve genellikle AI asistanları tarafından önerilir; ancak bence performans odaklı bir ortamda bu yanlış bir yaklaşımdır. Başlamak oldukça basittir. Pratikte, sızıntıyı optimize etme ve sınırlama süreci oldukça karmaşıktır. Aynı şekilde, dinamik yükleme + ad alanı oluşturma + TypeScript tiplerini birleştirmek geliştirmeyi çok yavaşlatır.
162
+
163
+ TanStack Start'ta Next.js'e özgü tuzaklardan ( `setRequestLocale`, statik render) kaçınırsınız, ancak temel sorun aynıdır: sıkı disiplin olmazsa, paket hızla çok fazla mesaj taşır ve rota başına ad alanı bakımı zahmetli hale gelir.
164
+
165
+ **(react-i18next)** (`react-i18next@17.0.2`):
166
+
167
+ `react-i18next` muhtemelen en popüler seçenektir çünkü JavaScript uygulama i18n ihtiyaçlarını karşılayan ilklerden biridir. Ayrıca belirli sorunlar için geniş bir topluluk eklenti setine sahiptir.
168
+
169
+ Yine de, `t('a.b.c')` üzerine kurulu teknoloji yığınlarıyla aynı büyük dezavantajları paylaşır: optimizasyonlar mümkündür ancak çok zaman alıcıdır ve büyük projeler kötü uygulamalara (ad alanları + dinamik yükleme + tipler) düşme riski taşır.
170
+
171
+ Mesaj formatları da farklıdır: `use-intl` ICU MessageFormat kullanırken, `i18next` kendi formatını kullanır — bu da bunları karıştırdığınızda araçları veya geçişleri karmaşıklaştırır.
172
+
173
+ **(Lingui)** (`@lingui/core@5.3.0`):
174
+
175
+ `Lingui` sık sık övülür. Şahsen `lingui extract` / `lingui compile` iş akışını diğer yaklaşımlardan daha karmaşık buldum ve bu TanStack Start benchmark'ında net bir avantaj göremedim. Ayrıca AI'ları şaşırtan tutarsız sözdizimleri fark ettim (örneğin `t()`, `t''`, `i18n.t()`, `<Trans>`).
176
+
177
+ **(react-intl)** (`react-intl@10.1.1`):
178
+
179
+ `react-intl`, Format.js ekibinin performans odaklı bir uygulamasıdır. DX "verbose" kalır: `const intl = useIntl()` + `intl.formatMessage({ id: "xx.xx" })` karmaşıklık, ek JavaScript yükü ekler ve global i18n örneğini React ağacındaki birçok düğüme bağlar.
180
+
181
+ ### 4 — Öneriler
182
+
183
+ Bu TanStack Start benchmark'ının `next-translate` (Next.js eklentisi + `getStaticProps`) için doğrudan bir karşılığı yoktur. Gerçekten olgun bir ekosisteme sahip bir `t()` API'si isteyen ekipler için `react-i18next` ve `use-intl` "makul" seçenekler olmaya devam ediyor, ancak sızıntıyı önlemek için optimizasyon yapmaya çok zaman ayırmaya hazırlıklı olun.
184
+
185
+ **(Intlayer)** (`react-intlayer@8.7.5-canary.0`):
186
+
187
+ Nesnellik adına kendi çözümüm olan `react-intlayer` hakkında kişisel olarak yorum yapmayacağım.
188
+
189
+ ### Kişisel Not
190
+
191
+ Bu not kişiseldir ve benchmark sonuçlarını etkilemez. Yine de i18n dünyasında, çevrilmiş içerik için genellikle `const t = useTranslation('xx')` + `<>{t('xx.xx')}</>` gibi bir desen etrafında fikir birliği görülür.
192
+
193
+ React uygulamalarında, bir React düğümü (ReactNode) olarak bir fonksiyon enjekte etmek bence bir antipatendir. Ayrıca, kaçınılabilir bir karmaşıklık ve (zar zor fark edilse bile) JavaScript yürütme yükü ekler.
@@ -0,0 +1,29 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-20
4
+ title: Порівняння (Benchmark) бібліотек i18n
5
+ description: Дізнайтеся, як Intlayer порівнюється з іншими бібліотеками i18n за продуктивністю та розміром бандла.
6
+ keywords:
7
+ - benchmark
8
+ - i18n
9
+ - intl
10
+ - nextjs
11
+ - tanstack
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - benchmark
16
+ history:
17
+ - version: 8.7.5
18
+ date: 2026-01-06
19
+ changes: "Ініціалізація бенчмарку"
20
+ ---
21
+
22
+ # Benchmark - Звіт
23
+
24
+ Benchmark Bloom — це набір тестів продуктивності, який вимірює реальний вплив бібліотек i18n (інтернаціоналізації) у різних React-фреймворках і стратегіях завантаження.
25
+
26
+ Нижче — детальні звіти та технічна документація для кожного фреймворку:
27
+
28
+ - [**Звіт бенчмарку Next.js**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/benchmark/nextjs.md)
29
+ - [**Звіт бенчмарку TanStack Start**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/benchmark/tanstack.md)