@weglot/translate-react

Przetłumacz swoje
React, Next.js lub Vite aplikacja

Bez opakowań typu t(), bez plików JSON. Dodaj wtyczkę do kompilacji oraz klucz API serwisu Weglot : tekst w kodzie JSX zostanie przetłumaczony podczas kompilacji aplikacji, a Twój zespół będzie mógł edytować tłumaczenia na stronie Weglot bez konieczności ingerowania w kod.

Pobierz swój klucz API

Skopiuj polecenie dla · · · zapoznaj się z dokumentacją · zobacz na npm

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

// how it works

Cztery kroki. Twoje komponenty pozostają bez zmian.

Języki źródłowe i docelowe pochodzą z projektu „ Weglot ”, a nie z kodu. Wtyczka odczytuje tekst z pliku JSX w trakcie kompilacji i pobiera jego tłumaczenia.

  1. Zainstaluj pakiet i dodaj swój klucz API

    Utwórz projekt „ Weglot 2.0”, a następnie skopiuj klucz API z ustawień projektu. Zaczyna się on od pk_. Zachowaj .env poza systemem kontroli wersji.

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

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Dodaj wtyczkę

    Otocz konfigurację Next.js tagami withWeglot. Punkt sourceRoot do folderu, w którym znajdują się Twoje strony i 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. Dodaj dostawcę

    Otocz swój układ główny tagiem WeglotProvider z punktu wejścia Next.js, dzięki czemu zmiana języka powoduje odświeżenie komponentów serwerowych.

    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. Twórz i publikuj w każdym języku używanym w projekcie

    Każda kompilacja pobiera brakujące tłumaczenia ze strony Weglot i zapisuje je public/translations/<locale>.json. Zignoruj ten folder. Dodaj przełącznik języka za pomocą LocaleSwitcher lub useWeglotContext.

    .gitignore
    public/translations/

// compare

A dlaczego nie skorzystać z klasycznej biblioteki i18n?

Biblioteki i18n wymagają zastąpienia każdego ciągu znaków kluczem i utrzymywania jednego pliku dla każdego języka. Program „ Weglot ” odczytuje ciągi znaków, które już zostały napisane. Oto porównanie dostępnych opcji.

Na podstawie publicznej dokumentacji poszczególnych projektów (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), listopad 2026 r.
Kryteria Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS Lokalizacja natywna CMS
Należy umieścić ciągi znaków w funkcjach typu t() lub funkcjach generujących komunikaty NieTekst w JSX jest wykrywany w trakcie kompilacji. Takt("key") dla każdego ciągu znaków. Takm.key() funkcje wiadomości. Tylko treśćCiągi znaków w kodzie nadal wymagają biblioteki.
Pliki tłumaczeń dla poszczególnych języków Nie ma elementów do utrzymaniaWygenerowano podczas kompilacji, pominięto w git. TakZazwyczaj jeden plik JSON na każdą lokalizację. TakJeden plik wiadomości na każdą lokalizację. Nienie są przechowywane w systemie CMS.
Wielojęzyczne przekierowania i SEO (adresy URL dla poszczególnych języków, atrybut hreflang) Jeszcze nieJęzyk zapisany w pliku cookie. Te same adresy URL dla wszystkich języków, indeksowanie według języka źródłowego. next-intl: takWbudowane przekierowanie lokalizacyjne. i18next: poprzez konfigurację frameworka. TakWbudowane zlokalizowane adresy URL: prefiksy regionalne, przetłumaczone ścieżki lub domeny. Tagi hreflang można dodawać samodzielnie. Interfejs użytkownikaSystem CMS typu headless przechowuje treści według ustawień regionalnych. Adresy URL i atrybuty hreflang pochodzą z interfejsu użytkownika.
Tłumaczenia wygenerowane specjalnie dla Ciebie TakWeglot tłumaczy się za pomocą modelu LLM podczas kompilacji. NiePrzynieś własne tłumaczenia lub system zarządzania tłumaczeniami (TMS). Korzystając z narzędziw tłumaczeniu masowym inlang CLI lub za pomocą Twojego agenta programistycznego. Płatny dodatekTłumaczenie oparte na sztucznej inteligencji w planach płatnych: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Edytuj tłumaczenia bez pomocy programisty TakPrzejrzyj i edytuj w panelu Weglot . NieEdytuj pliki JSON lub dodaj oddzielny plik TMS. Dzięki Finkowiw edytorze internetowym inlang, przy użyciu konta GitHub. TakW edytorze CMS.
Utworzone przez agenta programistycznego w ramach jednego polecenia TakJedna instalacja, dwie zmiany w konfiguracji. Poniżej znajduje się kod do skopiowania. Długotrwałe zadanieAgent przekształca każdy ciąg znaków w klucze i pliki. Długie zadanieinit działa bez wyświetlania monitów o podanie agentów, wówczas każdy ciąg znaków staje się m.key() wiadomość. nie dotyczySkonfigurowano w systemie CMS.

// built for coding agents

Stworzone z myślą o agentach programujących sztuczną inteligencję

Jeśli korzystasz z narzędzi Claude Code, Cursor lub Codex, twój agent może samodzielnie dodać adres Weglot . Nie trzeba przerabiać żadnych ciągów znaków, więc zmiana jest niewielka i łatwa do sprawdzenia.

01 · konfiguracja

Agent instaluje i konfiguruje to oprogramowanie

Jeden npm install, jedna wtyczka, jeden dostawca, jeden wiersz w .gitignore. Agent prosi cię jedynie o podanie klucza API.

02 · dokumenty

Dokumenty, które mogą odczytywać duże modele językowe (LLM)

W dokumentacji znajduje się llms.txt indeks, a każda strona ma wersję w formacie Markdown: dodaj .md do jego adresu URL.

03 · polecenie

Gotowy do skopiowania tekst

Każdy krok podany w instrukcji odpowiada przewodnikowi dla początkujących i zawiera rzeczywiste ścieżki importu. Skopiuj go poniżej.

Wklej kod Claude’a

      

      
      
      
    

  

  







  

    
// for your team

    
Edytuj i sprawdzaj bez ingerencji w kod

    
Każde tłumaczenie pojawia się w projekcie na stronie Weglot . Pracownicy działu produktu, marketingu oraz tłumacze sprawdzają i edytują tam treść bez konieczności otwierania pull requestu.

    
    
      
  • Sprawdź tłumaczenia wygenerowane przez serwis Weglot dla Twojej aplikacji.
    • 
      
  • Możesz edytować dowolne tłumaczenie w panelu administracyjnym Weglot .
    • 
      
  • Wyklucz cokolwiek z kodu zawierającego translate="no" lub data-weglot-skip.
    • 
    

  







  

    
// fit

    
Kiedy stosować „ Weglot ”, a kiedy nie

    
Pakiet jest w fazie podglądu. Oto, gdzie obecnie się znajduje.

    

      

        
Skorzystaj z @weglot/translate-react, jeśli

        
    
          
  • Twoja aplikacja korzysta z React 19 w środowisku Next.js (App Router) lub Vite.
    • 
          
  • Nie chcesz otaczać ciągów znaków funkcją t() ani utrzymywać osobnego pliku dla każdego języka.
    • 
          
  • Twój programista pisze większość kodu, a Ty chcesz, aby tłumaczenie nadążało za tym tempem.
    • 
          
  • Osoby, które nie znają się na programowaniu, powinny sprawdzać i edytować tłumaczenia.
    • 
          
  • Tekst interfejsu użytkownika jest zawarty w kodzie, a treści z systemu CMS można tłumaczyć po stronie serwera.
    • 
        

      

      

        
Jeśli tak, to użyj czegoś innego, jeśli

        
    
          
  • Potrzebujesz jednego adresu URL dla każdego języka oraz stron przetłumaczonych, które są już indeksowane przez wyszukiwarki. Skorzystaj z next-intl lub Paraglide JS.
    • 
          
  • Chcesz, aby tłumaczenia były zapisane w repozytorium w postaci plików i sprawdzane w ramach pull requestów. Skorzystaj z inlang w połączeniu z Paraglide JS lub i18next.
    • 
          
  • Twoja aplikacja korzysta z React 18, routera Pages w Next.js lub Next.js w wersji 14 lub starszej.
    • 
          
  • Twoja strona została stworzona w systemie CMS lub za pomocą narzędzia do tworzenia stron internetowych, a nie w React. Skorzystaj z integracji z systemami CMS dostępnych na stronie Weglot.
    • 
        

      

    

  







  

    
FAQ

    

      

        
Czy obsługuje SEO: jeden adres URL na język i atrybut hreflang?

        

          
Nie dzisiaj. Język użytkownika jest zapisywany w pliku cookie, a wszystkie wersje językowe są udostępniane pod tymi samymi adresami URL, więc wyszukiwarki indeksują wyłącznie wersję w języku źródłowym.

          
Możesz przetłumaczyć tytuły stron i opisy za pomocą tDynamicAll w generateMetadata. Jeśli potrzebujesz już teraz zindeksowanych adresów URL dla poszczególnych języków, skorzystaj z biblioteki obsługującej routing oparty na ustawieniach regionalnych, takiej jak next-intl lub Paraglide JS.

        

      

      

        
Jak przetłumaczyć treści dynamiczne pochodzące z systemu CMS, interfejsu API lub od użytkowników?

        

          
Wtyczka tłumaczy wyłącznie tekst zawarty w kodzie. W przypadku treści, do których kod nie ma dostępu, należy wywołać tDynamic, tDynamicAll lub tDynamicHtml z @weglot/translate-react/dynamic w komponentach serwerowych Next.js.

          
Jeśli wywołanie API trwa dłużej niż 500 ms lub tekst jest żądany po raz pierwszy, zwracany jest tekst źródłowy. Tłumaczenie będzie gotowe przy kolejnym wywołaniu. Jeśli samodzielnie buforujesz dane, dostosuj buforowanie do języka użytkownika.

        

      

      

        
Next.js czy Vite: co się zmienia?

        

          
Next.js wykorzystuje withWeglot z @weglot/translate-react/next oraz WeglotProvider z @weglot/translate-react/react/next. Vite wykorzystuje weglotPlugin z @weglot/translate-react/vite oraz WeglotProvider z @weglot/translate-react/react. Webpack wykorzystuje weglotPlugin z @weglot/translate-react/webpack.

          
Funkcje dynamicznej treści działają wyłącznie w komponentach serwerowych Next.js.

        

      

      

        
Czy to działa z komponentami serwerowymi Reacta?

        
Tak, za pomocą routera aplikacji Next.js. Importuj WeglotProvider z @weglot/translate-react/react/next tak, aby zmiana języka spowodowała odświeżenie komponentów serwera. tDynamic, tDynamicAll oraz tDynamicHtml działają po stronie serwera, w komponentach serwera.

      

      

        
Co się dzieje podczas kompilacji?

        

          
Wtyczka wyszukuje tekst w kodzie JSX w sekcji sourceRoot i wysyła zapytanie do interfejsu API Weglot o brakujące tłumaczenia. Serwis Weglot generuje je za pomocą modelu LLM, a proces kompilacji czeka maksymalnie translationTimeout (domyślnie 300 sekund). Następnie zapisuje public/translations/<locale>.json.

          
Jeśli tłumaczenie się nie powiedzie, kompilacja zakończy się niepowodzeniem, a otrzymane dane zostaną zachowane w lokalnej pamięci podręcznej: należy ponownie uruchomić kompilację, aby kontynuować. Z buildMode: "cache-only", ta kompilacja nie wykonuje żadnych wywołań sieciowych.

        

      

      

        
Gdzie są przechowywane tłumaczenia?

        
W projekcie „ Weglot ”, gdzie można je przeglądać i edytować. Każda kompilacja zachowuje również otrzymane tłumaczenia w pliku <sourceRoot>/weglot/cache/<locale>.json. Dodaj ten folder do kompilacji bez wywoływania API albo go zignoruj. public/translations/ jest generowany i trafia do .gitignore.

      

      

        
Co jest tłumaczone i jak mogę coś wykluczyć?

        
Tekst w JSX, literały łańcuchowe w wyrażeniach JSX, łańcuchy odczytywane ze stałych oraz atrybuty, takie jak title, alt, placeholder oraz aria-label. Kod, adresy URL, nazwy klas i ciągi znaków poza JSX pozostają bez zmian. Dodaj translate="no" lub data-weglot-skip aby zachować element w języku oryginalnym. Zdefiniuj własne właściwości tekstowe za pomocą translatableAttributes.

      

    

  







  

    
Spraw, by Twoja aplikacja React była wielojęzyczna bez konieczności jej przepisywania

    
Zainstaluj pakiet, dodaj swój klucz API i skompiluj.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Pobierz swój klucz API
    

    
Wolisz zrobić to samodzielnie? Zapoznaj się z dokumentacją lub sprawdź pakiet na npm