@intlayer/docs 9.5.6 → 9.5.7

package/blog/tr/i18next_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next vs Intlayer: 2026 Karşılaştırma ve Benchmark Testi"
 description: "Next.js ve TanStack Start üzerinde Intlayer ile karşılaştırılan react-i18next ve next-i18next ölçümleri. Paket boyutu, içerik sızıntısı, dil değiştirme tepki süresi ve geliştirici deneyimi."
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # i18next VS Intlayer | React & Next.js Uluslararasılaştırma (i18n) Benchmark Karşılaştırması
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `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](https://github.com/intlayer-org/benchmark-bloom) projesinden alınmıştır.
@@ -99,6 +101,10 @@ Her derleme için kaydedilen metrikler:
 
 ### Next.js Sonuçları (`next-i18next`)
 
+İlgilendiğiniz metrikleri ve kütüphaneleri seçin:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Kütüphane                         | Strateji       | Lib size (gz) | Page JS avg (gz) | Dil Sızıntısı | Sayfa Sızıntısı | Bileşen Ort. (gz) | E2E Tepki Süresi | Hydration |
 | --------------------------------- | -------------- | ------------: | ---------------: | ------------: | --------------: | ----------------: | ---------------: | --------: |
 | **base** (i18n yok)               | -              |        0.0 KB |         141.0 KB |          0.0% |            0.0% |            0.9 KB |          13.4 ms |   11.8 ms |
@@ -119,6 +125,15 @@ Her derleme için kaydedilen metrikler:
 - **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.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tüm kütüphaneler ve her strateji için tam tablo [Next.js kıyaslama raporunda](https://intlayer.org/tr/doc/benchmark/nextjs).
+
 ### 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:
@@ -141,8 +156,19 @@ Next.js'e özgü yapılandırmaları dışarıda bırakmak adına TanStack Start
 - 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.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tam tablo [TanStack Start kıyaslama raporunda](https://intlayer.org/tr/doc/benchmark/tanstack).
+
 ## Fark Nereden Kaynaklanıyor? Global Örnek vs Derlenmiş Sözlükler
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `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:
 
 ```bash
@@ -166,7 +192,13 @@ Next.js'e özgü yapılandırmaları dışarıda bırakmak adına TanStack Start
                 └── 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](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) 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".
+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:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
+[Benchmark notlarında](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) 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:
 
@@ -193,7 +225,8 @@ Intlayer global örneği tamamen ortadan kaldırır. İçerik doğrudan bileşen
 
 ### Kurulum Karşılaştırması
 
-**next-i18next (App Router)**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```ts fileName="src/app/i18n/server.ts"
 import { createInstance } from "i18next";
@@ -228,7 +261,8 @@ export const initI18next = async (
 
 Bunun yanı sıra istemci tarafı `I18nProvider`, `generateStaticParams` ve her sayfada ad alanı dizisi tanımlanmalıdır.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -264,9 +298,13 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
 export default LocaleLayout;
 ```
 
+</Tab>
+</Tabs>
+
 ### İstemci Bileşeni (Client Component)
 
-**react-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="react-i18next" value="i18next">
 
 ```json fileName="src/locales/en/about.json"
 {
@@ -304,7 +342,8 @@ export const Counter = () => {
 
 > 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**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -345,9 +384,13 @@ export const Counter = () => {
 
 `label` ve `increment` katı tiplere sahiptir; yazım hataları anında TypeScript hatası verir ve eksik çeviriler derlemeyi durdurur.
 
+</Tab>
+</Tabs>
+
 ### Eşzamanlı Sunucu Bileşeni (Server Component)
 
-**next-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -366,7 +409,8 @@ export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
 
 Sayfa seviyesinde `i18n.getFixedT(locale, "about")` çağrılmalı ve `t` ile `locale` bileşene prop olarak aktarılmalıdır.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -385,6 +429,9 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## 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.
@@ -415,18 +462,85 @@ Geçiş kılavuzlarına göz atın: [i18next](https://intlayer.org/tr/doc/migrat
 
 ## 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.
+<AccordionGroup>
+<Accordion header="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.
+
+</Accordion>
+<Accordion header="Intlayer'ı Seçin">
+
+**Bileşen düzeyinde içerik**, **katı TypeScript**, **derleme zamanı eksik anahtar hataları**, **zahmetsiz tree-shaking ve lazy loading**, anında dil değişimi, eşzamanlı sunucu bileşenleri ve yerleşik düzenleme araçları ([Görsel Düzenleyici](https://intlayer.org/tr/doc/concept/editor), [CMS](https://intlayer.org/tr/doc/concept/cms), [Yapay Zeka Çevirisi](https://intlayer.org/tr/doc/concept/auto-fill), [MCP Sunucusu](https://intlayer.org/tr/doc/mcp-server)) istiyorsanız. Özellikle büyük, modüler kod tabanları ve tasarım sistemleri için uygundur.
+
+</Accordion>
+<Accordion header="@intlayer/*-i18next Adaptörlerini Seçin">
+
+Zaten i18next kullanıyorsanız ve bileşenleri yeniden yazmadan paket ve tepkisellik kazanımlarını elde etmek istiyorsanız. `locales/{lng}/{ns}.json` dosyalarınız gerçek kaynak olarak kalır. [i18next vs @intlayer/i18next](https://intlayer.org/tr/blog/i18next-vs-intlayer-i18next) makalesinde yan yana ölçülmüştür.
+
+</Accordion>
+</AccordionGroup>
+
+## SSS (Sıkça Sorulan Sorular)
+
+<FAQ>
+
+<Question title="i18next neden diğer kütüphanelere göre çok daha ağırdır?">
+
+Framework'ten bağımsız bir çalışma zamanı olarak tasarlandı: global bir örnek, bir eklenti hattı, bir kaynak deposu, bir anahtar çözümleyici. Bu esneklik her pakete derlenir. Yalnızca kütüphaneyi içe aktaran boş bir bileşen `next-i18next` ile **19.7 KB gzip**, `next-intlayer` ile **5.5 KB** maliyete sahiptir ve bu maliyet içeriğiniz ne olursa olsun her sayfada ödenir.
+
+</Question>
+
+<Question title="Bir backend ile lazy loading bunu çözer mi?">
+
+Baytları çözer, gecikmeyi çözmez. `i18next-resources-to-backend`e geçmek sayfa başına ~49 KB kazandırır ancak dil geçişine bir ağ gidiş-dönüşü ekler: `dynamic` kurulumda **123 ms**, `scoped-static` kurulumda **185 ms**, Intlayer ile **3-4 ms**. Hidrasyon da 27.7 ms'ye fırlar çünkü React hidrasyon yapmadan önce örnek kendi backend'ini çözümler.
+
+</Question>
+
+<Question title="i18next ile %0 içerik sızıntısına ulaşabilir miyim?">
+
+Evet, `scoped-dynamic` ile: rota başına bir namespace, bir kaynak backend'i ve elle tuttuğunuz bir sayfa-namespace haritası. Next.js'te sayfa başına 163.4 KB'a ulaşır; bu da hiçbir yapılandırma gerektirmeyen Intlayer'ın 141.3 KB değerinden hala **+22 KB** fazladır. Bkz. [paket optimizasyonu](https://intlayer.org/tr/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="Geçiş yapmak için bileşenlerimi yeniden yazmam gerekir mi?">
+
+Hayır. `@intlayer/i18next`, `@intlayer/react-i18next` ve `@intlayer/next-i18next`; `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, `_one` / `_other` çoğulları, bağlam son ekleri ve `returnObjects`i korur. `next.config.ts` veya `vite.config.ts` içine tek bir eklenti satırı yeterlidir. [next-i18next geçiş kılavuzunda](https://intlayer.org/tr/doc/migration/next-i18next) adım adım anlatılmıştır.
+
+</Question>
+
+<Question title="i18next eklentilerime ne olur?">
+
+Backend'ler ve dil algılayıcılar kabul edilir ancak devre dışı kalır: çalışma zamanında yüklenecek veya algılanacak hiçbir şey kalmaz. Dil algılama, Intlayer'ın yönlendirme yapılandırmasına dönüşür (URL öneki, çerez, başlık). Uygulamanız istek anında bir CMS'den çevirileri alıyorsa, bunun yerine [Intlayer CMS](https://intlayer.org/tr/doc/concept/cms) veya `intlayer pull` / `push` kullanın.
+
+</Question>
+
+</FAQ>
 
 ## İlgili Karşılaştırmalar
 
-- [next-intl vs Intlayer](https://intlayer.org/tr/blog/next-intl-vs-intlayer) (aynı benchmark)
-- [Lingui vs Intlayer](https://intlayer.org/tr/blog/lingui-vs-intlayer) (aynı benchmark)
-- [vue-i18n vs Intlayer Karşılaştırması](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark) (aynı benchmark)
+Aynı kıyaslama, diğer kütüphaneler:
+
+- [next-intl vs Intlayer](https://intlayer.org/tr/blog/next-intl-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/tr/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark)
 - [next-i18next vs next-intl vs Intlayer](https://intlayer.org/tr/blog/next-i18next-vs-next-intl-vs-intlayer)
 - [react-i18next vs react-intl vs Intlayer](https://intlayer.org/tr/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+i18next hakkında daha fazlası:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/tr/blog/i18next-vs-intlayer-i18next), aynı uygulamada ölçülen adaptörler
 - [i18next modası geçti mi?](https://intlayer.org/tr/blog/is-i18next-outdated)
+- [i18next ile Intlayer Kullanımı](https://intlayer.org/tr/blog/intlayer-with-i18next) ve [react-i18next ile](https://intlayer.org/tr/blog/intlayer-with-react-i18next)
+- [next-i18next ile bir Next.js uygulamasını uluslararasılaştırma](https://intlayer.org/tr/blog/nextjs-internationalization-using-next-i18next)
+
+Referans belgeleri:
+
+- [Next.js kıyaslama raporu](https://intlayer.org/tr/doc/benchmark/nextjs) ve [TanStack Start kıyaslama raporu](https://intlayer.org/tr/doc/benchmark/tanstack)
+- Uyumluluk adaptörleri: [i18next](https://intlayer.org/tr/doc/compatibility/i18next), [react-i18next](https://intlayer.org/tr/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/tr/doc/compatibility/next-i18next)
+- Geçiş kılavuzları: [i18next](https://intlayer.org/tr/doc/migration/i18next), [react-i18next](https://intlayer.org/tr/doc/migration/react-i18next), [next-i18next](https://intlayer.org/tr/doc/migration/next-i18next)
+- [Paket optimizasyonu](https://intlayer.org/tr/doc/concept/bundle-optimization) ve [Intlayer derleyicisi](https://intlayer.org/tr/doc/compiler)
+- [Bileşen bazlı ve merkezi i18n](https://intlayer.org/tr/blog/per-component-vs-centralized-i18n)
+- [Derleyici güdümlü ve bildirimsel i18n](https://intlayer.org/tr/blog/compiler-vs-declarative-i18n)
 
 ## GitHub Yıldızları
 

package/blog/tr/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui ve Intlayer Karşılaştırması: 2026 Kıyaslama Testi"
 description: "Next.js ve TanStack Start üzerinde ölçülen derleyici tabanlı iki i18n kütüphanesi. Paket boyutu, içerik sızıntısı, bileşen boyutu, hidrasyon, dil değiştirme tepkiselliği ve geliştirici deneyimi."
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui ve Intlayer Karşılaştırması | React & Next.js Uluslararasılaşma (i18n) Testi
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Lingui ve Intlayer, bu karşılaştırmada saf bir çalışma zamanı (runtime) yerine bir **derleyiciye (compiler)** dayanan iki kütüphanedir. Lingui derleme sırasında makrolardan mesajları çıkarır ve her dil için kataloglar derler. Intlayer ise bileşen başına sözlükler derler ve bunları dil başına tree-shake eder. Kağıt üzerinde birbirine çok yakın görünmelidirler. Ancak sayılar nerede ayrıştıklarını açıkça ortaya koyuyor.
 
 Veriler, her kütüphaneyle aynı uygulamayı oluşturan ve tarayıcının gerçekte ne indirdiğini ve çalıştırdığını kaydeden açık kaynaklı bir test paketi olan [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) projesinden gelmektedir.
@@ -96,6 +98,10 @@ Her derleme için test paketi şunları kaydeder:
 
 ### Next.js Sonuçları
 
+İlgilendiğiniz metrikleri ve kütüphaneleri seçin:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Kütüphane           | Strateji       | Kütüphane Boyutu (gz) | Ort. Sayfa JS (gz) | Dil Sızıntısı | Sayfa Sızıntısı | Ort. Bileşen (gz) | E2E Tepkisellik | Hidrasyon |
 | ------------------- | -------------- | --------------------: | -----------------: | ------------: | --------------: | ----------------: | --------------: | --------: |
 | **base** (i18n yok) | -              |                0.0 KB |           141.0 KB |          0.0% |            0.0% |            0.9 KB |         13.4 ms |   11.8 ms |
@@ -114,6 +120,15 @@ Her derleme için test paketi şunları kaydeder:
 - **Kaynak dil yedeği sızdırır.** Optimize edilmiş kurulumlarda bile **`en` dizgilerinin %3-15'i `fr` sayfalarına gönderilir**. Lingui makroları kaynak mesajı yedek olarak hazır tutar, bu nedenle çevirinin yanında pakete girer. Intlayer ise yedekleri derleme sırasında çözer ve yalnızca etkin dili gönderir.
 - **`scoped-dynamic` modunda bileşen boyutu aşırı büyür.** Yalıtılmış olarak derlenen her bileşenin ortalaması **152.6 KB** olur, çünkü her rotanın kataloğu onu içe aktaran bileşenden erişilebilir hale gelir. `useIntlayer()` kullanan aynı bileşenin ortalaması yalnızca **6.9 KB**'dır.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tüm kütüphaneler ve stratejiler için tam tablo [Next.js benchmark raporunda](https://intlayer.org/tr/doc/benchmark/nextjs).
+
 ### TanStack Start Sonuçları
 
 | Kütüphane                   | Strateji       | Kütüphane Boyutu (gz) | Ort. Sayfa JS (gz) | Dil Sızıntısı | Sayfa Sızıntısı | Ort. Bileşen (gz) | E2E Tepkisellik | Hidrasyon |
@@ -135,8 +150,19 @@ Her derleme için test paketi şunları kaydeder:
 - **Intlayer'ın `static` satırı zaten %0 sayfa sızıntısına sahiptir**, çünkü yalnızca sayfa bileşenlerinin içe aktardığı sözlükler paketlenir. Tek satırlık bir yapılandırma (`importMode: 'dynamic'`) dil sızıntısını da ortadan kaldırır.
 - **`@intlayer/lingui`**, Lingui'nin makro sözdizimini korur ve bunu Intlayer sözlüklerinden sunar. Orijinal Lingui'ye göre daha küçük bileşenler (12.8 KB) ve daha hızlı hidrasyon elde etmek için sayfa boyutundan (137 KB) bir miktar ödün verir. Bu bir geçiş adımıdır, nihai hedef değildir.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tam tablo [TanStack Start benchmark raporunda](https://intlayer.org/tr/doc/benchmark/tanstack).
+
 ## Neden bu fark var? İki derleyici, iki çalışma birimi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Her iki kütüphane de derleme yapar. Fark, **neyi** derlediklerindedir.
 
 **Lingui katalogları derler.** Kaynak kodunuzdaki makrolar dil başına bir `.po` dosyasına ayıklanır, ardından dil başına bir JS modülüne derlenir. Temel birim **dildir**. Rota veya bileşen bazında daha fazla bölmek; birden fazla katalog oluşturmak, `lingui.config.ts` dosyasını her birini farklı dosya kümelerinden ayıklayacak şekilde yapılandırmak ve her rotada doğru olanı yüklemek anlamına gelir. Çalışma zamanı `I18n` örneği geneldir; her `useLingui()` çağrısı bileşeni buna bağlar.
@@ -176,7 +202,9 @@ Her iki kütüphane de derleme yapar. Fark, **neyi** derlediklerindedir.
             └── about.content.ts
 ```
 
-Bu nedenle `scoped-dynamic` modeli Intlayer için doğal bir derleme çıktısı iken, Lingui için zahmetli bir yapılandırma projesidir.
+Bu nedenle `scoped-dynamic` modeli Intlayer için doğal bir derleme çıktısı iken, Lingui için zahmetli bir yapılandırma projesidir. Fark iki eksende birden açılır: sayfalar ve diller:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > `dynamic` satırının sayılarını elde etmek için `intlayer.config.ts` dosyasında `dictionary.importMode: 'dynamic'` ayarını yapın. [Paket optimizasyonu kılavuzuna](https://intlayer.org/tr/doc/concept/bundle-optimization) göz atın.
 
@@ -184,7 +212,8 @@ Bu nedenle `scoped-dynamic` modeli Intlayer için doğal bir derleme çıktısı
 
 ### Kurulum
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="lingui.config.ts"
 import { defineConfig } from "@lingui/cli";
@@ -215,7 +244,8 @@ export const loadCatalog = async (locale: string) => {
 
 Ardından paketleyiciye `@lingui/babel-plugin-lingui-macro` (veya `@lingui/swc-plugin`) ekleyin, kaynak kodu düzenledikten sonra `lingui extract`, derlemeden önce `lingui compile` çalıştırın ve ağacı `<I18nProvider i18n={i18n}>` ile sarın.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -232,9 +262,12 @@ export default config;
 
 `vite.config.ts` içine `intlayer()` (veya `next.config.ts` içine `withIntlayer()`) ekleyin ve ağacı `<IntlayerProvider>` ile sarın. Ayıklama veya derleme adımı yoktur: sözlükler paketleyici çalıştığında kendiliğinden oluşturulur.
 
+</Tab>
+</Tabs>
 ### Bileşen
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```tsx fileName="src/components/Counter.tsx"
 import { useState } from "react";
@@ -258,7 +291,8 @@ export const Counter = () => {
 
 İngilizce metin bileşenin içinde yaşar; Fransızca olanı ise `lingui extract` çalıştırıldıktan sonra `src/locales/fr/messages.po` içinde hash'lenmiş bir kimlik altında saklanır. Bunu çalıştırmayı veya `compile` etmeyi unutmak sessizce İngilizceye geri döner.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -297,11 +331,14 @@ export const Counter = () => {
 
 Her iki dil de bileşenin yanında tek bir dosyada bulunur. Eksik bir `fr` değeri derleme hatasıdır, yanlış bir anahtar ise doğrudan TypeScript hatasıdır.
 
+</Tab>
+</Tabs>
 ### Bileşenlerin dışında
 
 Meta veriler, yükleyiciler (loaders), sunucu fonksiyonları: React ağacının bulunmadığı her yer.
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { setupI18n } from "@lingui/core";
@@ -324,7 +361,8 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 
 Çağrı başına yeni bir `I18n` örneği, doğru kataloğun manuel olarak yüklenmesi ve `t` yerine `msg` + `i18n._()` kullanımı. [Test notlarında](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) belirtildiği gibi, `t`, `` t` ` ``, `i18n.t()`, `msg` veya `<Trans>` yapılarının ne zaman kullanılacağını kestirmek her zaman sezgisel değildir.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { getIntlayer } from "intlayer";
@@ -336,6 +374,9 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Lingui makrolarını koruyun, Intlayer sözlüklerine geçin
 
 `@intlayer/lingui`, `@lingui/core` ve `@lingui/react` için doğrudan kullanılabilir bir uyumluluk adaptörüdür. Makrolar eskisi gibi derlenmeye devam eder; derlendikleri çalışma zamanı `i18n._()` çağrısı Intlayer sözlüklerinden beslenir ve `.po` senkronizasyon eklentileri mevcut kataloglarınızı kaynak olarak korur. ICU çoğul ve seçim ifadeleri birebir aynı şekilde işlenir.
@@ -353,16 +394,82 @@ export default defineConfig({
 
 ## Hangisi ne zaman seçilmeli?
 
-- **Lingui'yi seçin**: Tipli makrolarla **ICU MessageFormat** istiyorsanız, çevirmenleriniz mevcut bir TMS süreciyle **`.po`** dosyaları üzerinde çalışıyorsa, JSX içinde satır içi kaynak dizgileri tercih ediyorsanız ve ekibiniz ayıklama / derleme / katalog bölme iş akışını yönetmekten çekinmiyorsa. Tembel yükleme kurulduktan sonra sayfa başına JS boyutu oldukça rekabetçidir.
-- **Intlayer'ı seçin**: **Bileşen kapsamlı içerik**, **katı TypeScript desteği**, **derleme zamanı eksik anahtar hataları**, **yapılandırmasız tree-shaking ve tembel yükleme**, hafif bileşenler, hızlı hidrasyon, anında dil değiştirme ve yerleşik yönetim araçları (Görsel Düzenleyici, CMS, yapay zeka çevirisi, MCP sunucusu) istiyorsanız. Özellikle modüler kod tabanları ve tasarım sistemleri için idealdir.
-- **`@intlayer/lingui`'yi seçin**: Halihazırda Lingui kullanıyorsanız ve makrolara dokunmadan kademeli olarak Intlayer sözlüklerine geçmek istiyorsanız.
+<AccordionGroup>
+<Accordion header="Lingui'yi Seçin">
+
+Tiplendirilmiş makrolarla **ICU MessageFormat** istiyorsanız, çevirmenleriniz mevcut bir TMS işlem hattıyla **`.po`** dosyalarında çalışıyorsa, kaynak metinlerin JSX içinde doğrudan yer almasını tercih ediyorsanız ve ekibiniz ayıklama / derleme / katalog bölme iş akışını yönetmekten memnunsa. Lazi loading ayarlandıktan sonra sayfa başına JS boyutu oldukça rekabetçidir.
+
+</Accordion>
+<Accordion header="Intlayer'ı Seçin">
+
+**Bileşen kapsamlı içerik**, **katı TypeScript**, **derleme zamanında eksik anahtar hataları**, **sıfır çabayla tree-shaking ve lazy loading**, küçük bileşenler, hızlı hidrasyon, anında dil değiştirme ve yerleşik editöryal araçlar ([Görsel Düzenleyici](https://intlayer.org/tr/doc/concept/editor), [CMS](https://intlayer.org/tr/doc/concept/cms), [Yapay Zeka Çevirisi](https://intlayer.org/tr/doc/concept/auto-fill), [MCP Sunucusu](https://intlayer.org/tr/doc/mcp-server)) istiyorsanız. Özellikle büyük, modüler kod tabanları ve tasarım sistemleri için uygundur.
+
+</Accordion>
+<Accordion header="@intlayer/lingui'yi Seçin">
+
+Zaten Lingui kullanıyorsanız ve makrolara dokunmadan aşamalı olarak Intlayer sözlüklerine geçmek istiyorsanız. `.po` kataloglarınız [PO senkronizasyon eklentisi](https://intlayer.org/tr/doc/compatibility/lingui) sayesinde tek doğruluk kaynağı olarak kalır. [Lingui vs @intlayer/lingui](https://intlayer.org/tr/blog/lingui-vs-intlayer-lingui) sayfasında yan yana ölçülmüştür.
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Lingui de derleme yapıyor. Çıktı neden bu kadar farklı?">
+
+Çünkü derleme birimi farklıdır. Lingui **dil başına bir katalog** derler: bunun altındaki her şey (rota başına kataloglar, lazy loading, yedek metnin paketten çıkarılması) yapılandırma gerektirir. Intlayer **bileşen başına bir sözlük** derler, bu nedenle rota kapsamı derlemenin doğal bir sonucu olarak ortaya çıkar. Bu yüzden tek başına derlenen bir Lingui bileşeni 6-8 KB'a karşı 58-153 KB yer kaplar.
+
+</Question>
+
+<Question title="Lingui ile dil sızıntısı neden hiçbir zaman %0'a ulaşmaz?">
+
+Makrolar, kaynak mesajı çalışma zamanında bir geri dönüş (fallback) olarak kullanılabilir halde tutar, böylece İngilizce dize çevirisinin yanında pakete dahil olur. Benchmark, her optimize edilmiş kurulumda **`fr` sayfalarında %3-15 oranında `en` dizeleri** ölçmektedir. Intlayer derleme zamanında geri dönüşleri çözer ve yalnızca aktif dili gönderir.
+
+</Question>
+
+<Question title="Lingui'nin sayfa başına JavaScript'i gerçekten rekabetçi mi?">
+
+Evet, TanStack Start'ta kıl payı öndedir: Intlayer için 118.6 KB'a karşılık `dynamic` modda 115.2 KB. Karmaşık kimliklere sahip derlenmiş kataloglar kompakttır. Maliyet başka yerlerde ortaya çıkar: 11-14 ms'ye karşılık 28-34 ms hidrasyon ve `scoped-dynamic` kurulumunda **42 ms** süren dil değişimi.
+
+</Question>
+
+<Question title="Geçiş yapmak için makrolardan vazgeçmek zorunda mıyım?">
+
+Hayır. `@intlayer/lingui` `` t`...` ``, `<Trans>`, `msg`, `plural`, `select` ve `selectOrdinal` ifadelerinin eskisi gibi derlenmesini sağlar; yalnızca `i18n._()` çağrısının çözümlendiği kaynak değişir. Derlemede `@lingui/babel-plugin-lingui-macro` veya `@lingui/swc-plugin` kullanmaya devam edin. [Lingui uyumluluk belgesine](https://intlayer.org/tr/doc/compatibility/lingui) bakın.
+
+</Question>
+
+<Question title="Ayıklama ve derleme adımları ne olacak?">
+
+Makrolar için kalır, Intlayer'ın kendi içeriği için ortadan kalkar. `.content.ts` sözlükleri, ayrı bir CLI komutu olmadan paketleyici çalıştığında derlenir ve [`intlayer test`](https://intlayer.org/tr/doc/concept/cli) sessizce kaynak dizeye dönmek yerine eksik bir anahtar olduğunda CI sürecini durdurur.
+
+</Question>
+
+</FAQ>
 
 ## İlgili karşılaştırmalar
 
-- [next-intl ve Intlayer Karşılaştırması](https://intlayer.org/tr/blog/next-intl-vs-intlayer) (aynı test)
-- [i18next ve Intlayer Karşılaştırması](https://intlayer.org/tr/blog/i18next-vs-intlayer) (aynı test)
-- [vue-i18n ve Intlayer Kıyaslaması](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark) (aynı test)
-- [Derleyici ve Bildirimsel i18n Karşılaştırması](https://intlayer.org/tr/blog/compiler-vs-declarative-i18n)
+Aynı benchmark, diğer kütüphaneler:
+
+- [next-intl vs Intlayer](https://intlayer.org/tr/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/tr/blog/i18next-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/tr/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/tr/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Daha fazlası:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/tr/blog/lingui-vs-intlayer-lingui), aynı uygulamada ölçülen bağdaştırıcı
+- [Compiler-driven vs declarative i18n](https://intlayer.org/tr/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/tr/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/tr/blog/icu-message-format)
+
+Referans belgeler:
+
+- [Next.js benchmark raporu](https://intlayer.org/tr/doc/benchmark/nextjs) ve [TanStack Start benchmark raporu](https://intlayer.org/tr/doc/benchmark/tanstack)
+- [Compat adapter: Lingui](https://intlayer.org/tr/doc/compatibility/lingui)
+- [Paket optimizasyonu](https://intlayer.org/tr/doc/concept/bundle-optimization) ve [Intlayer derleyicisi](https://intlayer.org/tr/doc/compiler)
 
 ## GitHub Yıldızları