@weglot/translate-react

Přeložte svůj
React, Next.js nebo Vite aplikace

Žádné obálky t(), žádné soubory JSON. Přidejte plugin pro sestavení a klíč API služby Weglot : text ve vašem JSX se přeloží při sestavení aplikace a váš tým může překlady upravovat na stránce Weglot , aniž by se musel dotýkat kódu.

Získejte svůj API klíč

Zkopírujte výzvu pro · · · přečtěte si dokumentaci · zobrazit na npm

// what your users see

JSX, které jste napsali, v jakémkoli jazyce

Text napište jen jednou. Weglot jej přeloží při kompilaci.

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

Jedno tlačítko, pět jazyků. Šířky se měří v reálném čase.

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

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

Žádné klíče, žádné t(). Stačí napsat text v JSX, to je vše.

0volání funkce t() pro přidání
0překladové soubory, které je třeba udržovat
1npm install
2úpravy kódu: plugin a poskytovatel

// how it works

Čtyři kroky. Vaše komponenty zůstanou beze změny.

Zdrojový a cílový jazyk se určují na základě vašeho projektu Weglot , nikoli na základě vašeho kódu. Plugin načte text z vašeho JSX v době kompilace a stáhne jeho překlady.

  1. Nainstalujte balíček a zadejte svůj API klíč

    Vytvořte projekt „ Weglot 2.0“ a poté zkopírujte jeho klíč API z nastavení projektu. Začíná na pk_. Pokračujte .env mimo systém správy verzí.

    terminál · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Přidat plugin

    Obalte svou konfiguraci Next.js pomocí withWeglot. Bod sourceRoot do složky, ve které jsou uloženy vaše stránky a komponenty.

    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. Přidat poskytovatele

    Obalte své kořenové rozložení pomocí WeglotProvider z vstupního bodu Next.js, takže při změně jazyka dojde k aktualizaci vašich serverových komponent.

    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. Sestavte a vydávejte v každém jazyku vašeho projektu

    Při každém sestavení se načtou chybějící překlady z adresy Weglot a zapíší se public/translations/<locale>.json. Tuto složku ignorujte. Přidejte přepínač jazyků pomocí LocaleSwitcher nebo useWeglotContext.

    .gitignore
    public/translations/

// under the hood

Co se stane, když vytvoříte

  1. 01Načteváš JSX
  2. 02Odesílánovou zprávu
  3. 03 Překlad článku „Weglot “
  4. 04Vytvoříjeden soubor pro každý jazyk

// every language of your project

Jedna sestava, všechny jazyky, které přidáte

Vyberte jazyky na stránce Weglot. Budou zahrnuty v příštím vydání.

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

Přidejte jazyk na stránce Weglot a poté spusťte kompilaci. Překladové soubory se nasadí společně s vaší aplikací.

// built for coding agents

Váš agent to zařídí

Není třeba přepisovat žádné řetězce, takže změna je malá a snadno se kontroluje.

Jakýkoli programovací agent. Vložte jeden příkaz do agenta, který již používáte.

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

Soubory, které agenti Docs dokážou načíst: index llms.txt a soubory ve formátu Markdown pro každou stránku.

✓Nainstaluje balíčekpackage.json
✓Přidá pluginnext.config.ts
✓Přidá poskytovatelelayout.tsx
✓Ignoruje vygenerované soubory.gitignore
?Vyžádá si váš API klíč.env

Rozdíly, které si můžete prohlédnout. Žádné řádky nebyly přepsány.

Vložit kód z Clauda

      

      
      
      
    

  

        

        
Zkopírujte příkaz. Postupujte stejně jako v průvodci pro začátečníky.

      

    

  










  

    
// what gets translated

    
Plugin rozlišuje text od kódu

    

      

      

        
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>
  );
}

      

      
Text je přeložen. Text v JSX, literály, konstanty, atributy alt, title, placeholder a aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Kód zůstává beze změny. Názvy tříd, URL adresy, logika.

      
translate="no"
Je to na vás. Můžete ponechat jakýkoli prvek beze změny, nebo použít atribut data-weglot-skip.

    

  











  

    
// for your team

    
Úpravy a kontrola bez zásahu do kódu

    

      

      

        
my-next-app › němčina2 k posouzení

        
ZdrojněmčinaStav

        
Save changesÄnderungen speichernRecenze

        
Start your free trialKostenlos testenÚpravy

        
Cancel anytime.Jederzeit kündbar.K přezkoumání

        
Choose your planWählen Sie Ihren TarifK přezkoumání

      

      
Recenze na stránkách Weglot. Text upravují pracovníci z oddělení produktů, marketingu a překladatelé.

      
Edit saved · Kostenlos testen
No code change
Žádný pull request kvůli opravě jednoho slova.

      
Sledujte, co už jste prošli. Podívejte se na pokrok v jednotlivých jazycích.

    

  









  

    
// fit

    
Kdy použít „ Weglot “ a kdy ne

    
Balíček je ve fázi náhledu. Zde je jeho aktuální zařazení.

    

      
Směrovač aplikací Next.js
Podporované stránky
Next.js 15 nebo 16.0.4 a vyšší, React 19.

      
Vite
Podporované stránky
React 19, Node 20.9 a vyšší. Webpack také funguje.

      
Serverové komponenty Reactu
Podporované stránky
Změna jazyka způsobí aktualizaci komponent serveru.

      
Obsah CMS a API
Podporované stránky
S tDynamic v serverových komponentách Next.js.

      
Úpravy prováděné uživateli, kteří nejsou vývojáři
Podporované stránky
Zkontrolujte a upravte v ovládacím panelu služby „ Weglot “.

      
Jedna URL adresa pro každý jazyk
Ještě ne
Jazyk je v současné době uložen v souboru cookie. Nyní potřebujete indexované URL adresy pro jednotlivé jazyky: použijte next-intl nebo Paraglide JS.

      
Překlady ve formě souborů repo
Přeložit akci
Weglot přeloží vaše soubory JSON s nastavením místního formátu v GitHub Actions a otevře žádost o začlenění. Viz dokumentace →

      
React 18, Pages Router
Není podporováno
Také Next.js 14 nebo starší.

      
CMS nebo nástroj pro tvorbu webových stránek
Ne tento balíček
Váš web není vytvořen v Reactu: využijte integraci CMS na stránce Weglot.

    

  











  

    
// compare

    
Proč ne klasická knihovna pro internacionalizaci (i18n)?

    
Knihovny pro internacionalizaci (i18n) vyžadují, abyste každý řetězec nahradili klíčem a pro každý jazyk udržovali samostatný soubor. Nástroj Weglot načte řetězce, které jste již napsali. Zde je srovnání jednotlivých možností.


    
  










  

    
ČASTO KLADENÉ DOTAZY

    

      

        
Podporuje SEO: jedna URL adresa pro každý jazyk a atribut hreflang?

        

          
Dnes ne. Jazyk návštěvníka je uložen v souboru cookie a všechny jazykové verze jsou dostupné na stejných URL adresách, takže vyhledávače indexují pouze zdrojový jazyk.

          
Názvy stránek a popisy můžete přeložit pomocí tDynamicAll v generateMetadata. Pokud právě teď potřebujete indexované URL adresy pro jednotlivé jazyky, použijte knihovnu s lokalizovaným směrováním, jako je například next-intl nebo Paraglide JS.

        

      

      

        
Jak mohu přeložit dynamický obsah z CMS, API nebo od uživatelů?

        

          
Plugin překládá pouze text obsažený ve vašem kódu. Pro obsah, ke kterému se váš kód nikdy nedostane, zavolejte tDynamic, tDynamicAll nebo tDynamicHtml z @weglot/translate-react/dynamic v serverových komponentách Next.js.

          
Pokud zpracování API trvá déle než 500 ms nebo je text vyžádán poprvé, vrátí se zdrojový text. Překlad bude k dispozici při následujícím požadavku. Pokud si data ukládáte do mezipaměti sami, přizpůsobte obsah mezipaměti jazyku návštěvníka.

        

      

      

        
Next.js nebo Vite: co se změní?

        

          
Next.js používá withWeglot z @weglot/translate-react/next a WeglotProvider z @weglot/translate-react/react/next. Vite používá weglotPlugin z @weglot/translate-react/vite a WeglotProvider z @weglot/translate-react/react. Webpack používá weglotPlugin z @weglot/translate-react/webpack.

          
Funkce dynamického obsahu fungují pouze v serverových komponentách Next.js.

        

      

      

        
Funguje to s React Server Components?

        
Ano, pomocí Next.js App Router. Import WeglotProvider z @weglot/translate-react/react/next tak, aby se při změně jazyka aktualizovaly komponenty vašeho serveru. tDynamic, tDynamicAll a tDynamicHtml běží na straně serveru, v serverových komponentách.

      

      

        
Co se stane, když spustím kompilaci?

        

          
Plugin vyhledá text v kódu JSX pod sourceRoot a požádá API Weglot o překlady, které mu chybí. Weglot je vygeneruje pomocí LLM a sestavení čeká až translationTimeout (ve výchozím nastavení 300 sekund). Poté zapíše public/translations/<locale>.json.

          
Pokud se překlad nezdaří, sestavení selže a přijatá data zůstanou v lokální mezipaměti: pro pokračování proveďte sestavení znovu. S buildMode: "cache-only", sestavení neprovádí žádná síťová volání.

        

      

      

        
Kde jsou překlady uloženy?

        
Ve vašem projektu Weglot , kde je můžete zkontrolovat a upravit. Každá sestava si také uchovává překlady, které obdržela, v <sourceRoot>/weglot/cache/<locale>.json. Tuto složku zařaďte do sestavení bez volání API, nebo ji ignorujte. public/translations/ se vygeneruje a vloží se do .gitignore.

      

      

        
Co se překládá a jak mohu něco vynechat?

        
Text v JSX, řetězcové literály uvnitř výrazů JSX, řetězce načtené z konstant a atributy, jako například title, alt, placeholder a aria-label. Kód, URL adresy, názvy tříd a řetězce mimo JSX zůstávají beze změny. Přidat translate="no" nebo data-weglot-skip chcete-li zachovat prvek v původním jazyce. Definujte si vlastní textové vlastnosti pomocí translatableAttributes.

      

    

  







  

    
Udělejte svou aplikaci v Reactu vícejazyčnou, aniž byste ji museli přepisovat

    
Nainstalujte balíček, zadejte svůj API klíč a spusťte kompilaci.

    

      
terminál

      
$ npm install @weglot/translate-react

    

    

      
      Získejte svůj API klíč
    

    
Chcete si to raději udělat sami? Přečtěte si dokumentaci nebo si balíček prohlédněte na npm