Dlaczego warto rozważyć Intlayer?

Czym jest Intlayer?

Intlayer to biblioteka do internacjonalizacji zaprojektowana specjalnie dla programistów JavaScript. Pozwala ona na deklarowanie treści w dowolnym miejscu w kodzie. Przekształca deklaracje treści wielojęzycznych w strukturalne słowniki, które można łatwo zintegrować z kodem. Dzięki zastosowaniu TypeScript, Intlayer sprawia, że proces programowania staje się bardziej solidny i wydajny.

Dlaczego powstał Intlayer?

Intlayer powstał, aby rozwiązać powszechny problem dotyczący wszystkich popularnych bibliotek i18n, takich jak next-intl, react-i18next, react-intl, next-i18next, react-intl czy vue-i18n.

Wszystkie te rozwiązania stosują scentralizowane podejście do listowania i zarządzania treścią. Na przykład:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Lub przy użyciu przestrzeni nazw:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Tego typu architektura spowalnia proces programowania i komplikuje utrzymanie kodu z kilku powodów:

1. Dla każdego nowego komponentu należy:

   • Utworzyć nowy zasób/przestrzeń nazw w folderze locales
   • Pamiętać o zaimportowaniu nowej przestrzeni nazw na stronie
   • Przetłumaczyć treść (często robione ręcznie poprzez kopiowanie/wklejanie z narzędzi AI)

2. Dla każdej zmiany w komponentach należy:

   • Wyszukać powiązany zasób/przestrzeń nazw (z dala od komponentu)
   • Przetłumaczyć treść
   • Upewnić się, że treść jest aktualna dla wszystkich języków
   • Zweryfikować, czy przestrzeń nazw nie zawiera nieużywanych kluczy/wartości
   • Upewnić się, że struktura plików JSON jest taka sama dla wszystkich języków

W profesjonalnych projektach korzystających z tych rozwiązań często używa się platform lokalizacyjnych do zarządzania tłumaczeniami. Jednak w przypadku dużych projektów może to szybko stać się kosztowne.

Aby rozwiązać ten problem, Intlayer stosuje podejście polegające na ograniczeniu zakresu treści do każdego komponentu i przechowywaniu jej blisko niego, podobnie jak robimy to z CSS (styled-components), typami, dokumentacją (storybook) czy testami jednostkowymi (jest).

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Takie podejście pozwala na:

1. Zwiększenie prędkości programowania

   • Pliki .content.{{ts|mjs|cjs|json}} można tworzyć za pomocą rozszerzenia VSCode
   • Narzędzia AI do autouzupełniania w IDE (np. GitHub Copilot) mogą pomagać w deklarowaniu treści, ograniczając kopiowanie/wklejanie

2. Uporządkowanie kodu

   • Zmniejszenie złożoności
   • Zwiększenie łatwości utrzymania

3. Łatwiejsze duplikowanie komponentów wraz z ich treścią (np. komponenty logowania/rejestracji itp.)

   • Poprzez ograniczenie ryzyka wpływu na treść innych komponentów
   • Poprzez kopiowanie/wklejanie treści z jednej aplikacji do drugiej bez zewnętrznych zależności

4. Unikanie zaśmiecania kodu nieużywanymi kluczami/wartościami dla nieużywanych komponentów

   • Jeśli nie używasz komponentu, Intlayer nie zaimportuje powiązanej z nim treści
   • Jeśli usuniesz komponent, łatwiej będzie pamiętać o usunięciu powiązanej z nim treści, ponieważ znajduje się ona w tym samym folderze

5. Zmniejszenie kosztów rozumowania dla agentów AI przy deklarowaniu treści wielojęzycznych

   • Agent AI nie będzie musiał skanować całego kodu, aby wiedzieć, gdzie zaimplementować treść
   • Tłumaczenia można łatwo wykonać za pomocą narzędzi AI do autouzupełniania w IDE (np. GitHub Copilot)

6. Optymalizację wydajności ładowania

   • Jeśli komponent jest ładowany leniwie (lazy-loaded), powiązana z nim treść zostanie załadowana w tym samym czasie

Dodatkowe funkcje Intlayer

Pokaż całą zawartość tabeli

Pokaż całą zawartość tabeli

Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość

Funkcja	Opis
	Obsługa wielu frameworków Intlayer jest kompatybilny ze wszystkimi głównymi frameworkami i bibliotekami, w tym Next.js, React, Vite, Vue.js, Nuxt, Preact, Express i innymi.
	Zarządzanie treścią oparte na JavaScript Wykorzystaj elastyczność JavaScript do wydajnego definiowania i zarządzania treścią. - Deklarowanie treści
	Kompilator Kompilator Intlayer automatycznie wyodrębnia treść z komponentów i generuje pliki słowników. - Kompilator
	Plik deklaracji treści dla każdego języka Przyspiesz programowanie, deklarując treść raz przed automatycznym generowaniem. - Plik deklaracji treści dla każdego języka
	Środowisko bezpieczne pod względem typów (Type-Safe) Wykorzystaj TypeScript, aby upewnić się, że definicje treści i kod są wolne od błędów, korzystając jednocześnie z autouzupełniania w IDE. - Konfiguracja TypeScript
	Uproszczona konfiguracja Szybko rozpocznij pracę dzięki minimalnej konfiguracji. Łatwo dostosuj ustawienia internacjonalizacji, routingu, AI, budowania i obsługi treści. - Poznaj integrację z Next.js
	Uproszczone pobieranie treści Nie ma potrzeby wywoływania funkcji t dla każdego elementu treści. Pobieraj całą treść bezpośrednio za pomocą jednego hooka. - Integracja z React
	Spójna implementacja Server Components Idealnie dopasowana do Next.js Server Components, używaj tej samej implementacji dla komponentów klienckich i serwerowych, bez konieczności przekazywania funkcji t przez każdy komponent serwerowy. - Server Components
	Uporządkowany kod Utrzymuj kod w większym porządku: 1 komponent = 1 słownik w tym samym folderze. Tłumaczenia znajdujące się blisko swoich komponentów poprawiają łatwość utrzymania i przejrzystość. - Jak działa Intlayer
	Ulepszony routing Pełne wsparcie dla routingu aplikacji, płynnie dostosowujące się do złożonych struktur aplikacji w Next.js, React, Vite, Vue.js itd. - Poznaj integrację z Next.js
	Obsługa Markdown Importuj i interpretuj pliki lokalne oraz zdalne pliki Markdown dla treści wielojęzycznych, takich jak polityki prywatności, dokumentacja itp. Interpretuj i udostępniaj metadane Markdown w kodzie. - Pliki treści
	Darmowy edytor wizualny i CMS Dla autorów treści dostępny jest darmowy edytor wizualny i CMS, eliminujący potrzebę korzystania z platform lokalizacyjnych. Synchronizuj treść za pomocą Git lub całkowicie lub częściowo wyprowadź ją na zewnątrz dzięki CMS. - Edytor Intlayer - Intlayer CMS
	Treść typu Tree-shakable Treść typu tree-shakable, zmniejszająca rozmiar końcowego pakietu. Ładuje treść na poziomie komponentu, wykluczając wszelkie nieużywane treści z pakietu. Obsługuje leniwe ładowanie dla zwiększenia wydajności ładowania aplikacji. - Optymalizacja budowania aplikacji
	Renderowanie statyczne Nie blokuje renderowania statycznego. - Integracja z Next.js
	Tłumaczenie wspomagane przez AI Przetłumacz swoją stronę na 231 języków jednym kliknięciem, korzystając z zaawansowanych narzędzi tłumaczeniowych AI Intlayer z własnym dostawcą AI/kluczem API. - Integracja CI/CD - Intlayer CLI - Auto-fill
	Integracja z Serwerem MCP Zapewnia serwer MCP (Model Context Protocol) do automatyzacji IDE, umożliwiając płynne zarządzanie treścią i przepływy pracy i18n bezpośrednio w środowisku programistycznym. - Serwer MCP
	Rozszerzenie VSCode Intlayer zapewnia rozszerzenie VSCode, które pomaga zarządzać treścią i tłumaczeniami, budować słowniki, tłumaczyć treści i nie tylko. - Rozszerzenie VSCode
	Interoperacyjność Umożliwia interoperacyjność z react-i18next, next-i18next, next-intl i react-intl. - Intlayer i react-intl - Intlayer i next-intl - Intlayer i next-i18next
Testowanie brakujących tłumaczeń (CLI/CI)	✅ CLI: npx intlayer content test (audyt przyjazny dla CI)

Porównanie Intlayer z innymi rozwiązaniami

Gwiazdki na GitHubie

Gwiazdki na GitHubie są silnym wskaźnikiem popularności projektu, zaufania społeczności i długoterminowego znaczenia. Choć nie są bezpośrednią miarą jakości technicznej, odzwierciedlają, ilu programistów uważa projekt za przydatny, śledzi jego postępy i prawdopodobnie go przyjmie. Przy szacowaniu wartości projektu gwiazdki pomagają porównać zainteresowanie alternatywami i dostarczają wglądu w rozwój ekosystemu.

Interoperacyjność

intlayer może również pomóc w zarządzaniu przestrzeniami nazw react-intl, react-i18next, next-intl, next-i18next oraz vue-i18n.

Korzystając z intlayer, możesz zadeklarować swoją treść w formacie ulubionej biblioteki i18n, a intlayer wygeneruje przestrzenie nazw w wybranej przez Ciebie lokalizacji (przykład: /messages/{{locale}}/{{namespace}}.json).