@weglot/translate-react

Çevir
Tepki ver, Next.js veya Vite uygulama

T() wrapper'ı yok, JSON dosyası yok. Bir build eklentisi ve Weglot API anahtar: JSX'inizdeki metin, uygulamanız oluşturulduğunda çevrilir ve ekibiniz çevirileri düzenler. Weglot Koda dokunmadan.

Kendine API Anahtar

Promptu şu için kopyalayın · · · Belgeleri okuyun · NPM'de görüntü

React 19 Next.js 15 / 16.0.4+ (App Router) veya Vite Node 20.9+ gerektirir

// how it works

Dört adım. Bileşenleriniz olduğu gibi kalır.

Kaynak ve hedef diller ise Weglot proje, kodunuzdan değil. Eklenti, JSX'inizdeki metni derleme zamanında okur ve çevirilerini getirir.

  1. Paketi kur ve kendi API Anahtar

    Bir Weglot 2.0 projesi, sonra kopyalaması API Proje ayarlarından anahtar noktasını alabilir. Başlıyor pk_. Devam et .env sürüm kontrolünden çıkmış.

    terminal · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Eklentiyi ekle

    Next.js yapılandırmanızı şu kodla sarın: withWeglot. Nokta sourceRoot sayfalarınızı ve bileşenlerinizi tutan klasöre ulaşabilirsiniz.

    next.config.ts
    import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

  3. Sağlayıcıyı ekleyin

    Kök düzeninizi şu kodla sarın: WeglotProvider Next.js giriş noktasından başlayarak, böylece dil değiştirmek sunucu bileşenlerinizi yeniler.

    app/layout.tsx
    import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

  4. Projenizin her dilinde inşa edin ve gönderin

    Her yapı eksik çevirileri getiriyor Weglot ve yazar public/translations/<locale>.json. O klasörü görmezden gelin. Bir dil değiştirici ekleyin LocaleSwitcher veya useWeglotContext.

    .gitignore
    public/translations/

// compare

Neden klasik bir i18n kütüphanesi olmasın?

i18n kütüphaneleri, her dizeyi bir anahtarla değiştirmenizi ve her dil için bir dosya tutmanızı ister. Weglot Daha önce yazdığınız dizileri okur. İşte seçeneklerin karşılaştırılması.

Her projenin kamuya açık dokümantasyonuna göre (Weglot, sonraki uluslararası bölüm, Paraglide JS, Contentful, Sanity, Strapi), Kasım 2026.
Kriterler Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS CMS Yerel yerelleştirme
Dizeleri t() veya mesaj fonksiyonlarında sarmak JSX'te derleme sırasında hiçbir Metin algılanmaz. Evett("key") her tel için. Evetm.key() mesaj fonksiyonları. Sadeceiçerikle kodunuzdaki Dizgiler için yine de bir kütüphane gerekiyor.
Dil başına çeviri dosyaları Üretimi sürdürmek için yok, git-ignored. Evet, genellikle her lokasyon için bir tane JSON dosyası olur. Evet, her lokasyon için bir mesaj dosyası. HayırDepo CMS.
Çok dilli yönlendirme ve SEO (dil başına URL, terk alanı) HenüzDil bir çerezde saklanmıyor. Tüm diller için aynı URL'ler, kaynak dili indekslenmiş. next-intl: Evet, yerel yönlendirme dahili var. i18next: çerçeve kurulumunuz üzerinden. Evet, yerleşik yerelleştirilmiş URL'ler: yerel önekler, çevrilmiş yollar veya alan adları. Hreflang etiketlerini kendiniz ekleyin. Ön kısımBaşsız bir CMS İçeriği yerel olarak saklar. URL'ler ve arrelanglar ön uçunuzdan gelir.
Sizin için oluşturulan çeviriler EvetWeglot Yapı sırasında LLM ile çevriliyor. Kendiçevirilerinizi veya TMS getirin. Tooling, inlang CLI, makine çevirisi veya kodlama ajanınızla. Ücretli planlarda ücretli eklentiyapay zeka çevirisi: İçerikli Yapay Zeka Eylemleri, Sanity AI Yardımı, Strapi AI Çevirileri.
Çevirileri geliştirici olmadan düzenleme Evetİnceleme ve düzenleme Weglot Gösterge paneli. JSON dosyalarını düzenleme ya da ayrı bir TMS eklemek yok. Finkinlang'ın web editörü ile, bir GitHub hesabına sahip. EvetT CMS editör.
Bir kodlama ajanı tarafından tek bir promptta kuruldu Evet, bir kurulum, iki yapılandırma düzenlemesi. Aşağıda kopyalanabilir bir prompt. Uzun görevAjan, her dizeyi anahtarlara ve dosyalara yeniden yazar. Uzun görevinit Ajanlar için istekler olmadan çalışır, sonra her dizi bir m.key() mesaj. N/aYapılandırılmıştır CMS.

// built for coding agents

Yapay Zeka kodlama ajanları için inşa edildi

Claude Code, Cursor veya Codex ile derlerseniz, ajanınız Weglot Kendi başına bir şey var. Yeniden yazılması gereken bir şart yok, bu yüzden değişiklik küçük ve kolayca gözden geçiriliyor.

01 · Kurulum

Ajan onu kurar ve yapılandırır

Bir npm install, bir eklenti, bir sağlayıcı, bir hat girişi .gitignore. Temsilci sadece API anahtar.

02 · Belgeler

LLM'lerin okuyabildiği belgeler

Dokümantasyonda bir llms.txt indeks ve her sayfanın bir Markdown versiyonu vardır: add .md URL'sine ulaşır.

03 · Prompt

Kopyalanmaya hazır bir prompt

İsterin her adımı, gerçek aktarma yollarıyla birlikte başlangıç rehberiyle eşleşiyor. Aşağıya kopyalayın.

Claude Kodu'na yapıştır

      

      
      
      
    

  

  







  

    
// for your team

    
Koda dokunmadan düzenleme ve inceleme

    
Her çeviri sizin Weglot proje. Ürün, pazarlama ve çevirmenler, orada bir pull request açmadan ifadeyi inceler ve düzenler.

    
    
      
  • Çevirileri inceleyinWeglot Uygulamanız için oluşturur.
    • 
      
  • Herhangi bir çeviriyi düzenleyin Weglot Gösterge paneli.
    • 
      
  • Dışlama Koddan herhangi bir şey translate="no" veya data-weglot-skip.
    • 
    

  







  

    
// fit

    
Ne zaman kullanılmalıdır Weglot, ve yapmamaları

    
Paket ön izlemede. Bugün tam olarak burada yer alıyor.

    

      

        
Kullanım @weglot/translate-react if

        
    
          
  • Uygulamanız Next.js (App Router) veya Vite üzerinde React 19 çalıştırıyor.
    • 
          
  • Dizeleri t() ile sarmak veya her dil için bir dosya tutmak istemezsiniz.
    • 
          
  • Kodlama ajanınız kodun çoğunu yazıyor ve çevirinin bunu takip etmesi için kullanmak istersiniz.
    • 
          
  • Kod yazmayan kişiler çevirileri gözden geçirmeli ve düzenlemeli.
    • 
          
  • Kullanıcı arayüzü metniniz kod içinde yaşıyor, CMS sunucu tarafında çevirebileceğiniz içerikler.
    • 
        

      

      

        
Başka bir şey kullan

        
    
          
  • Bugün her dil için bir URL ve arama motorları tarafından indekslenen çevrilmiş sayfalar gerek. Next-intl veya Paraglide JS kullanın.
    • 
          
  • Çevirileri repo dosya olarak ve pull request'lerde incelenmesini istersiniz. Paraglide JS veya i18next ile inlang kullanın.
    • 
          
  • Uygulamanız React 18, Next.js Pages Router veya Next.js 14 veya daha eski sürümlerde.
    • 
          
  • Siteniz bir CMS ya da web sitesi oluşturucu, React değil. Kullanım Weglot's CMS entegrasyonlar.
    • 
        

      

    

  







  

    
SSS

    

      

        
SEO ile mi ilgileniyor: her dil için bir URL ve bir terk alanı?

        

          
Bugün değil. Ziyaretçinin dili bir çerezde saklanır ve her dil aynı URL'lerde sunulur, bu yüzden arama motorları yalnızca kaynak dili indeksler.

          
Sayfa başlıklarını ve açıklamalarını şu şekilde çevirebilirsiniz tDynamicAll içinde generateMetadata. Şimdi dil başına indekslenmiş URL'lere ihtiyacınız varsa, next-intl veya Paraglide JS gibi yerel yönlendirme içeren bir kütüphane kullanın.

        

      

      

        
Dinamik içeriği bir CMS, an API Ya da kullanıcılar?

        

          
Eklenti sadece kodunuzda yazılmış metni çeviriyor. Kodunuz hiç görmediği içerik için tDynamic, tDynamicAll veya tDynamicHtml from @weglot/translate-react/dynamic sunucu bileşenlerinde Next.js.

          
Eğer API 500 ms'den uzun sürse veya ilk kez metin istenirse, kaynak metni döndürürler. Çeviri daha sonraki bir istekte hazır olur. Verileri kendiniz önbelleyecekseniz, önbelleği ziyaretçinin diline bağlı yapın.

        

      

      

        
Next.js veya Vite: Ne değişir?

        

          
Next.js kullanımları withWeglot from @weglot/translate-react/next ve WeglotProvider from @weglot/translate-react/react/next. Vite kullanımları weglotPlugin from @weglot/translate-react/vite ve WeglotProvider from @weglot/translate-react/react. Webpack kullanımları weglotPlugin from @weglot/translate-react/webpack.

          
Dinamik içerik fonksiyonları yalnızca Next.js sunucu bileşenlerinde çalışır.

        

      

      

        
React Server Bileşenleri ile çalışıyor mu?

        
Evet, Next.js App Router ile. İçe aktarma WeglotProvider from @weglot/translate-react/react/next Böylece dil değiştirmek sunucu bileşenlerinizi yeniler. tDynamic, tDynamicAll ve tDynamicHtml sunucu tarafı, sunucu bileşenlerinde çalıştırın.

      

      

        
Ben inşa ettiğimde ne olur?

        

          
Eklenti, metni JSX'te şu şekilde bulur: sourceRoot ve soruyor Weglot API çeviriler açısından eksik. Weglot onları bir LLM ile oluşturur ve derleme bekler translationTimeout (varsayılan olarak 300 saniye). Sonra yazar public/translations/<locale>.json.

          
Eğer çeviri başarısız olursa, derleme başarısız olur ve aldığı şeyi yerel önbellekte tutar: devam etmek için tekrar derleyin. Ile buildMode: "cache-only", deri ağ çağrısı yapmıyor.

        

      

      

        
Çeviriler nerede saklanıyor?

        
Sizin Weglot projesi, onları inceleyip düzenlediğiniz bir proje. Her derleme ayrıca aldığı çevirileri de korur <sourceRoot>/weglot/cache/<locale>.json. O klasörü çağırmadan derleme için commit edin API, ya da görmezden gelin. public/translations/ üretilir ve içeri girer .gitignore.

      

      

        
Ne çevriliyor ve bir şeyi nasıl hariç tutabilirim?

        
JSX'teki metin, JSX ifadeleri içindeki dize literalleri, sabitlerden okunan dizeler ve aşağıdaki gibi nitelikler title, alt, placeholder ve aria-label. JSX dışındaki kod, URL'ler, sınıf adları ve dizileri olduğu gibi bırakılır. Ekle translate="no" veya data-weglot-skip Bir öğeyi orijinal dilde tutmak için. Kendi metin prop'larınızı şu şekilde ilan edin translatableAttributes.

      

    

  







  

    
React uygulamanızı yeniden yazmadan çok dilli hale getirin

    
Paketi kur, kendi API Anahtar, yapı.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Kendine API Anahtar
    

    
Kendiniz yapmayı mı tercih ediyorsunuz? Belgeleri okuyun veya paketi NPM'de izleyin