@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

// what your users see

Napisany przez Ciebie kod JSX w każdym języku

Wystarczy napisać tekst raz. Weglot tłumaczy go w trakcie kompilacji.

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

Ten sam przycisk, pięć języków. Szerokości mierzone na bieżąco.

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

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

Żadnych kluczy, żadnego t(). Wpisz tekst w formacie JSX – i to wszystko.

0wywołania funkcji t() do dodania
0pliki tłumaczeń do utrzymania
1npm install
2zmiany w kodzie: wtyczka i dostawca

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

// under the hood

Co się dzieje, gdy budujesz

  1. 01Odczytujekod JSX
  2. 02 Wysyłanową wiadomość tekstową
  3. 03Weglot tłumaczenie
  4. 04Tworzyjeden plik dla każdego języka

// every language of your project

Jedna kompilacja, każdy dodany język

Wybierz języki na stronie Weglot. Zostaną one uwzględnione w kolejnej wersji.

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

Dodaj język w sekcji „ Weglot ”, a następnie skompiluj aplikację. Pliki tłumaczeń zostaną wdrożone wraz z aplikacją.

// built for coding agents

Twój agent to załatwi

Nie trzeba przerabiać żadnych fragmentów kodu, więc zmiana jest niewielka i łatwa do sprawdzenia.

Dowolny agent do kodowania. Wklej jedno polecenie do agenta, z którego już korzystasz.

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

Pliki, które mogą odczytywać agenci Docs: indeks llms.txt oraz pliki Markdown dla każdej strony.

✓Instaluje pakietpackage.json
✓Dodaje wtyczkęnext.config.ts
✓Dodaje dostawcęlayout.tsx
✓Ignoruje wygenerowane pliki.gitignore
?Prosi o podanie klucza API.env

Zmiany, które możesz przejrzeć. Żadnych przepisanych ciągów znaków.

Wklej kod Claude’a

      

      
      
      
    

  

        

        
Skopiuj polecenie. Postępuj zgodnie z instrukcją zawartą w przewodniku dla początkujących.

      

    

  










  

    
// what gets translated

    
Wtyczka rozpoznaje tekst zawarty w kodzie

    

      

      

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

      

      
Tekst został przetłumaczony. Tekst JSX, literały, stałe, atrybuty „alt”, „title”, „placeholder” oraz „aria-label”.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Kod pozostaje bez zmian. Nazwy klas, adresy URL, logika.

      
translate="no"
Decyzja należy do Ciebie. Możesz pozostawić dowolny element bez zmian lub użyć atrybutu „data-weglot-skip”.

    

  











  

    
// for your team

    
Edytuj i sprawdzaj bez ingerencji w kod

    

      

      

        
my-next-app › niemiecki2 do sprawdzenia

        
ŹródłoniemieckiStatus

        
Save changesÄnderungen speichernZrecenzowano

        
Start your free trialKostenlos testenEdycja

        
Cancel anytime.Jederzeit kündbar.Podsumowanie

        
Choose your planWählen Sie Ihren TarifPodsumowanie

      

      
Recenzja na stronie Weglot. Treść jest redagowana przez dział produktu, marketingu oraz tłumaczy.

      
Edit saved · Kostenlos testen
No code change
Nie wysyłaj pull requestu tylko po to, by poprawić jedno słowo.

      
Śledź, co zostało sprawdzone. Sprawdź postępy w nauce każdego języka.

    

  









  

    
// fit

    
Kiedy stosować „ Weglot ”, a kiedy nie

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

    

      
Router aplikacji Next.js
Obsługiwane
Next.js 15 lub 16.0.4+, React 19.

      
Vite
Obsługiwane
React 19, Node 20.9+. Webpack też działa.

      
Komponenty serwerowe Reacta
Obsługiwane
Zmiana języka powoduje odświeżenie komponentów serwera.

      
Treści CMS i API
Obsługiwane
Wraz z tDynamic w komponentach serwerowych Next.js.

      
Edycja przez osoby niebędące programistami
Obsługiwane
Przejrzyj i edytuj w panelu sterowania „ Weglot ”.

      
Jeden adres URL na język
Jeszcze nie
Obecnie język jest zapisany w pliku cookie. Potrzebujesz teraz indeksowanych adresów URL dla poszczególnych języków: skorzystaj z next-intl lub Paraglide JS.

      
Tłumaczenia w postaci plików repo
Tłumacz akcję
Weglot przetłumaczy Twoje pliki ustawień regionalnych w formacie JSON w GitHub Actions i utworzy pull request. Zobacz dokumentację →

      
React 18, router Pages
Nie jest obsługiwane
Również Next.js 14 lub starsze wersje.

      
CMS lub narzędzie do tworzenia stron internetowych
Nie ta paczka
Twoja strona nie została stworzona w React: skorzystaj z integracji z systemami CMS dostępnych na stronie Weglot.

    

  











  

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


    
  










  

    
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