@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ü

// what your users see

Senin yazdığın JSX, her dilde

Metni bir kez yaz. Weglot Kurulum sırasında çeviriyor.

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

Aynı düğme, beş dil. Genişlikler canlı ölçülüyor.

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

Anahtar yok, t() yok. Metni JSX'te yaz, hepsi bu.

0t() ekleme çağrısı
0çeviri dosyası bakımı
1npm kurulumu
2kod düzenlemesi: eklenti ve sağlayıcı

// 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/

// under the hood

İnsat yaptığınızda ne olur

  1. 01 JSX'inizi okuyor
  2. 02 Yeni metin gönderiyor
  3. 03Weglot Çeviri
  4. 04 Her dil için bir dosya yazar

// every language of your project

Bir yapı, eklediğiniz her dil

Dilleri seç Weglot. Bir sonraki yapım onları gönderiyor.

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Bir dil ekleyin Weglot, sonra oluştur. Çeviri dosyaları uygulamanızla birlikte dağıtılır.

// built for coding agents

Ajanınız bunu ayarlıyor

Yeniden yazma şartı yok, bu yüzden değişiklik küçük ve kolayca gözden geçiriliyor.

Herhangi bir kodlama ajanı. Zaten kullandığınız ajana bir prompt yapıştırın.

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

Docs ajanları okuyabilir. Her sayfa için bir llms.txt dizini ve Markdown.

✓Paketi yüklerpackage.json
✓Eklentiyi ekliyornext.config.ts
✓Sağlayıcı ekliyorlayout.tsx
✓Oluşturulan dosyaları görmezden gelir.gitignore
?Sizden API Anahtar.env

İnceleebileceğiniz bir fark. Hiçbir şartı yeniden yazma.

Claude Kodu'na yapıştır

      

      
      
      
    

  

        

        
İsteyi kopyalayın. Başlama rehberindeki adımlarla aynı.

      

    

  










  

    
// what gets translated

    
Eklenti metni koddan tanır

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
Metin çevrilir. JSX metni, kelime harfleri, sabitler, alt, başlık, yer tutucu, arya-etiket.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Kod dokunulmaz. Sınıf isimleri, URL'ler, mantık.

      
translate="no"
Karar senin. Herhangi bir öğeyi olduğu gibi tutun ya da veri kullanın-weglot-Atla.

    

  











  

    
// for your team

    
Koda dokunmadan düzenleme ve inceleme

    

      

      

        
my-next-app › Almanca2 inceleme için

        
Kaynak:AlmanStatüsü

        
Save changesÄnderungen speichernİnceleme

        
Start your free trialKostenlos testenDüzenleme

        
Cancel anytime.Jederzeit kündbar.İncelemek için

        
Choose your planWählen Sie Ihren Tarifİncelemek için

      

      
İnceleme Weglot. Ürün, pazarlama ve çevirmenler ifadeyi düzenler.

      
Edit saved · Kostenlos testen
No code change
Bir kelimeyi düzeltmek için bir pull request yok.

      
Nelerin incelendiğini takip edin. Her dil için ilerlemeyi görün.

    

  









  

    
// fit

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

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

    

      
Next.js Uygulama Yönlendiricisi
Desteklenen
Next.js 15 veya 16.0.4+, React 19.

      
Vite
Desteklenen
React 19, Node 20.9+. Webpack de çalışıyor.

      
React Server Bileşenleri
Desteklenen
Dil değiştirmek, sunucu bileşenlerinizi yeniler.

      
CMS ve API İçerik
Desteklenen
Ile tDynamic sunucu bileşenlerinde Next.js.

      
Geliştirici olmayan düzenlemeler
Desteklenen
İnceleme ve düzenleme Weglot Gösterge paneli.

      
Her dil için bir URL
Henüz değil
Dil bugün bir çerezde saklanıyor. Şimdi dil başına indekslenmiş URL'lere ihtiyacım var: next-intl veya Paraglide JS kullanın.

      
Depo dosyaları olarak çeviriler
Çeviri Eylemi
Weglot JSON yerel dosyalarınızı GitHub Actions'ta çeviriyor ve bir pull request açıyor. Belgeleri →

      
React 18, Pages Router
Desteklenmiyor
Ayrıca 14 yaş ve üzeri Next.js.

      
CMS veya web sitesi oluşturucu
Bu paket değil
Siteniz React: Kullanım Weglot's CMS entegrasyonlar.

    

  











  

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


    
  










  

    
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