@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

Vyžaduje React 19 Next.js 15 / 16.0.4+ (App Router) nebo Vite Node 20.9+

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

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

Na základě veřejně dostupné dokumentace jednotlivých projektů (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), listopad 2026.
Kritéria Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS Nativní lokalizace CMS
Řetězce obalte funkcí t() nebo funkcemi pro práci se zprávami Netext v JSX není detekován při kompilaci. Anot("key") pro každý řetězec. Anom.key() funkce zpráv. Pouze obsahŘetězce ve vašem kódu stále vyžadují knihovnu.
Překladové soubory podle jazyka Není třeba udržovatVygenerováno při kompilaci, ignorováno v Git. AnoObvykle jeden soubor JSON na jedno národní prostředí. AnoJeden soubor se zprávami pro každé jazykové prostředí. Neuloženo v CMS.
Vícejazyčné směrování a SEO (URL pro každý jazyk, hreflang) Zatím neJazyk je uložen v souboru cookie. Pro všechny jazyky platí stejné URL adresy, zdrojový jazyk je indexován. next-intl: anoIntegrované směrování podle národního prostředí. i18next: prostřednictvím nastavení vašeho frameworku. AnoIntegrované lokalizované URL adresy: předpony pro jazykové varianty, přeložené cesty nebo domény. Značky hreflang si můžete přidat sami. FrontendBezhlavý CMS ukládá obsah podle jazykové verze. URL adresy a atribut hreflang pocházejí z vašeho front-endu.
Překlady vygenerované pro vás AnoWeglot se překládá pomocí LLM během sestavování. NePřineste si vlastní překlady nebo systém pro správu překladů (TMS). Pomocí nástrojůstrojovým překladem inlang CLI nebo vaším programovacím agentem. Placený doplněkAI překlad v placených tarifech: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Úprava překladů bez zapojení vývojáře AnoZkontrolujte a upravte v ovládacím panelu Weglot . NeUpravujte soubory JSON nebo přidejte samostatný TMS. Pomocí Finkuwebovým editorem inlang, s účtem na GitHubu. AnoV editoru CMS.
Vytvořeno programátorem v rámci jednoho zadání AnoJedna instalace, dvě úpravy konfigurace. Níže je uveden příkaz, který lze zkopírovat. Dlouhý úkolAgent přepisuje každý řetězec do klíčů a souborů. Dlouhý úkolinit běží bez výzvy k zadání agentů, pak se každý řetězec stane m.key() zpráva. n/aNastaveno v CMS.

// built for coding agents

Vytvořeno pro agenty zabývající se programováním umělé inteligence

Pokud používáte nástroje Claude Code, Cursor nebo Codex, váš agent dokáže sám přidat výraz „ Weglot “. Není třeba přepisovat žádné řetězce, takže se jedná o drobnou změnu, kterou lze snadno zkontrolovat.

01 · nastavení

Agent jej nainstaluje a nakonfiguruje

Jedna npm install, jeden plugin, jeden poskytovatel, jeden řádek v .gitignore. Agent od vás požaduje pouze API klíč.

02 · dokumenty

Dokumenty, které mohou číst velké jazykové modely (LLM)

Dokumentace obsahuje llms.txt index a každá stránka má verzi v Markdownu: přidejte .md k její URL adrese.

03 · zadání

Výzva připravená ke zkopírování

Každý krok v pokynech odpovídá návodu pro začátečníky a obsahuje skutečné cesty k importu. Zkopírujte jej níže.

Vložit kód z Clauda

      

      
      
      
    

  

  







  

    
// for your team

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

    
Každý překlad se zobrazí ve vašem projektu na Weglot . Zaměstnanci z oddělení produktového vývoje, marketingu a překladatelé tam znění zkontrolují a upraví, aniž by museli otevírat žádost o začlenění změn (pull request).

    
    
      
  • Zkontrolujte překlady, které pro vaši aplikaci generuje služba Weglot .
    • 
      
  • Upravte jakýkoli překlad v ovládacím panelu služby „ Weglot “.
    • 
      
  • Vyloučit cokoli z kódu s translate="no" nebo data-weglot-skip.
    • 
    

  







  

    
// fit

    
Kdy použít „ Weglot “ a kdy ne

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

    

      

        
Použijte @weglot/translate-react, pokud

        
    
          
  • Vaše aplikace využívá React 19 na platformě Next.js (App Router) nebo Vite.
    • 
          
  • Určitě nechcete obalovat řetězce do funkce t() ani spravovat jeden soubor pro každý jazyk.
    • 
          
  • Váš programovací agent píše většinu kódu a vy chcete, aby překlad s tím držel krok.
    • 
          
  • Lidé, kteří neumí programovat, by měli překlady zkontrolovat a upravit.
    • 
          
  • Text uživatelského rozhraní je součástí kódu, zatímco obsah CMS lze překládat na straně serveru.
    • 
        

      

      

        
Použijte něco jiného, pokud

        
    
          
  • Pro každý jazyk potřebujete jednu URL adresu a stránky v příslušném jazyce, které jsou již dnes zaindexovány vyhledávači. Použijte next-intl nebo Paraglide JS.
    • 
          
  • Chcete, aby překlady byly uloženy jako soubory ve vašem repozitáři a aby byly revidovány v rámci pull requestů. Použijte inlang společně s Paraglide JS nebo i18next.
    • 
          
  • Vaše aplikace využívá React 18, směrovač stránek Next.js nebo Next.js 14 či starší verzi.
    • 
          
  • Váš web je vytvořen v systému CMS nebo pomocí nástroje pro tvorbu webových stránek, nikoli v Reactu. Využijte integraci se systémy CMS na stránce Weglot.
    • 
        

      

    

  







  

    
Č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