i18n dla komponentu

    Bezpieczne typowanie. Tłumacz przy pomocy AI. Edytuj wizualnie.

    Definiuj tłumaczenia obok komponentów, aby przyspieszyć rozwój. Utrzymuj paczkę tak lekką, jak powinna być. Zaproś edytorów przez CMS. Każdy wkład jest naprawdę doceniany.

    npm install intlayer

    Dostępne dla

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    Wypróbuj za darmo, korzystając z playgrounda.Przejdź do playgrounda
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    Popraw utrzymanie kodu, umieszczając definicje treści blisko komponentów. Zmniejsz redundancję, zwiększ przejrzystość i uprość aktualizacje dzięki uporządkowanemu podejściu, które sprawia, że kod jest łatwiejszy do zarządzania i skalowania w czasie.

    Wydobądź swoje treści natychmiast za pomocą Kompilatora Intlayer. Automatycznie wygeneruje niezbędne pliki słownika dla Twoich treści, aby umiędzynarodowić Twoją aplikację w sekundę.

    Wykorzystaj darmowy edytor wizualny do łatwego tworzenia i zarządzania stroną. Twórz, edytuj i organizuj komponenty oraz strony bez konieczności ingerencji w kod, co ułatwia efektywną współpracę menedżerów treści i deweloperów.

    Poszerzaj zasięg dzięki wbudowanemu wsparciu dla tłumaczeń. Łatwo tłumacz treści za pomocą intuicyjnego interfejsu, zapewniając bezproblemowe wielojęzyczne doświadczenia dla użytkowników bez konieczności ręcznego zarządzania wieloma wersjami treści.

    Użyj Intlayer CLI do przetestowania i uzupełnienia treści za pomocą AI, aby mieć pewność, że wszystkie tłumaczenia są kompletne i poprawne.

    Dlaczego warto wybrać Intlayer?

    Darmowy i otwartoźródłowy

    Intlayer jest darmowy i otwartoźródłowy, co pozwala na jego bezpłatne używanie oraz współtworzenie i dostosowywanie do własnych potrzeb.

    Zarządzanie treścią oparte na JavaScript

    Wykorzystaj elastyczność JavaScriptu, aby definiować i zarządzać treścią w wydajny sposób.

    Środowisko z bezpieczeństwem typów

    Wykorzystaj TypeScript, aby zapewnić, że wszystkie twoje definicje treści są precyzyjne i wolne od błędów.

    Deklaracja na poziomie komponentu

    Umieszczaj tłumaczenia bezpośrednio przy odpowiednich komponentach, co ułatwia utrzymanie i zwiększa czytelność.

    Uproszczona konfiguracja

    Szybko rozpocznij pracę przy minimalnej konfiguracji, szczególnie zoptymalizowanej pod projekty Next.js.

    Zintegrowany CMS

    Edytuj treści bezpośrednio na swojej stronie dzięki zintegrowanemu CMS. Wspomagaj generowanie treści dzięki AI.

    Technologia

    Dynamiczne ładowanie JSON

    Wczytuje tłumaczenia leniwie w czasie wykonywania

    Ograniczony JSON (przestrzenie nazw)

    Przestrzenie nazw tłumaczeń na stronę

    Benchmark wydajności I18n

    Brak danych

    Czym jest ta metryka?

    Całkowity skompresowany przez gzip rozmiar pakietu biblioteki umiędzynarodowienia. Obejmuje tylko dostawcę i logikę pobierania treści po tree-shakingu i minifikacji.

    Dlaczego to jest ważne?

    Mniejszy rozmiar biblioteki zmniejsza obciążenie u klienta.

    Zobacz jako

    Przeanalizuj globalny wynik lokalizacji swojej strony internetowej

    Szybko i za darmo oceń jakość lokalizacji swojej strony internetowej. Analizuj główne wielojęzyczne elementy witryny, aby uzyskać kompleksową ocenę oraz praktyczne wskazówki poprawiające jej zasięg.

    i18n oparte na kodzie

    Bezpieczne typowo tłumaczenia w Twoim repozytorium.

    Deklaruj treści obok komponentów w TypeScript lub JavaScript. Intlayer automatycznie generuje typy, zapewniając autouzupełnianie, walidację i natychmiastową informację zwrotną. Koniec z brakującymi kluczami.

    AI CLI Tool

    Automatyzuj tłumaczenia ze swojego terminala.

    CLI do audytu, uzupełniania i tłumaczenia JSON i Markdown za pomocą AI.

    Uruchom `npx intlayer fill`, aby wykryć brakujące klucze i wygenerować tłumaczenia za pomocą OpenAI, Claude lub modeli lokalnych. Czysta historia Git i bezpieczne typy.

    Intlayer TMS

    Przestań płacić za słowo. Automatyzuj za pomocą AI.

    Alternatywa open-source dla Crowdin i Lokalise. Zbudowana dla nowoczesnych przepływów pracy deweloperów.

    Zarządzaj tłumaczeniami bezpośrednio w kodzie lub za pomocą edytora wizualnego. Wykorzystaj AI do natychmiastowego tłumaczenia. Współpracuj z zespołem bez limitów miejsc.

    Headless CMS

    Połącz lokalny kod z treściami zdalnymi.

    Zarządzaj wielojęzycznymi treściami bez narzutu. Intlayer pozwala łączyć lokalne słowniki ze zdalnym zarządzaniem, umożliwiając Live Sync dla aktualizacji "na gorąco" bez przebudowy. Używaj webhooków do CI/CD i zarządzaj flagami funkcji.

    Flagi funkcji

    Przełączaj funkcje natychmiast. Bez wdrażania.

    Słowniki Intlayer to coś więcej niż tekst. Używaj ich do deklarowania logiki, stylów i konfiguracji. Dzięki Live Sync możesz włączać/wyłączać funkcje, zmieniać motywy UI i aktualizować zachowanie aplikacji w czasie rzeczywistym bezpośrednio z CMS.

    Testy A/B

    Twoje pole do eksperymentów produktowych.

    Bądź pierwszym, który wypróbuje nową wersję beta AI-driven A/B Testing od Intlayera — stworzoną, aby zwiększyć odkrywalność i wspierać mądrzejsze decyzje produktowe. Testuj wszystko w czasie rzeczywistym: od treści i projektu po całe funkcje, i pozwól danym pokazać, co naprawdę działa.

    Dostępne na

    Wypróbuj demo na żywo

    Zbudowane przez społeczność

    Poznaj niesamowitych współtwórców, którzy umożliwiają Intlayer

    Najczęściej zadawane pytania

    Czym jest internacjonalizacja (i18n)?

    Internacjonalizacja (i18n) to proces projektowania i tworzenia aplikacji, takich jak Next.js, React czy Express, w sposób umożliwiający łatwe wsparcie dla wielu języków. Pozwala tworzyć witryny wielojęzyczne poprzez uproszczenie procesu tłumaczenia. Narzędzia takie jak TypeScript ułatwiają wdrażanie i18n, umożliwiając wydajne i proste dostosowanie aplikacji do różnych języków i regionów.Dowiedz się więcej o i18n

    Jakie są główne funkcje Intlayer?

    Intlayer upraszcza zarządzanie konfiguracją i umożliwia internacjonalizację dla różnych typów aplikacji JavaScript, w tym komponentów serwerowych. Pozwala deklarować treści bezpośrednio obok komponentów, co poprawia utrzymanie kodu. Ponadto Intlayer wykorzystuje TypeScript, aby zapobiegać brakującym deklaracjom. Dodatkowo Intlayer oferuje edytor wizualny, który pozwala osobom nietechnicznym edytować zawartość witryny, automatycznie tłumaczyć treści przy użyciu AI i optymalizować SEO aplikacji.Dowiedz się więcej o funkcjach Intlayer

    Czy Intlayer posiada edytor wizualny?

    Tak, Intlayer oferuje opcjonalny edytor wizualny do zarządzania treścią bez konieczności zagłębiania się w kod.Dowiedz się więcej o edytorze wizualnym

    Ile kosztuje korzystanie z Intlayer?

    Intlayer integruje zestaw darmowych pakietów NPM wraz z edytorem wizualnym. Dodatkowo oferuje CMS do zewnętrznego przechowywania treści. Ten CMS jest bezpłatny w użyciu, ale zawiera dodatkowe funkcje dostępne dla użytkowników planów Premium i Enterprise.Dowiedz się więcej o planach Intlayer

    Czy mogę zintegrować Intlayer na istniejących rozwiązaniach?

    Tak, Intlayer można zintegrować jako wrapper wokół i18next, next-intl, vue-i18next i nie tylko. Dzięki temu możesz zautomatyzować tłumaczenia i korzystać z Intlayer bez konieczności refaktoryzacji istniejącego kodu.

    Czym jest Intlayer?

    Intlayer to pakiet, który pozwala zarządzać twoją wielojęzyczną stroną internetową. Dostarcza zestaw narzędzi i funkcji pomocniczych, które ułatwiają konfigurację serwisu pod kątem treści wielojęzycznych i lokalizacji.Dowiedz się więcej o Intlayer

    Jak Intlayer integruje się z Next.js?

    Intlayer integruje się z Next.js, umożliwiając renderowanie po stronie serwera oraz generowanie statycznych stron, co sprawia, że dostarczanie treści wielojęzycznych jest bardziej efektywne.Dowiedz się więcej o integracji z Next.js

    Jak mogę przyczynić się do rozwoju Intlayer?

    Możesz przyczynić się, wysyłając pull requesty lub zgłaszając problemy w repozytorium na GitHubie.Dowiedz się więcej o współtworzeniu Intlayer

    Które platformy obsługuje Intlayer?

    Intlayer jest dostępny dla React (w tym Create React App), Vite z React, Next.js, Tanstack Start, Vue, Nuxt, Express, NestJS, Preact oraz innych. Zapewnia to płynną integrację z nowoczesnymi frameworkami JavaScript i środowiskami po stronie serwera.Dowiedz się więcej o obsługiwanych platformach
    Przeczytaj wszystkie najczęściej zadawane pytania