Dlaczego warto rozważyć Intlayer?

Czym jest Intlayer?

Intlayer to biblioteka do internacjonalizacji stworzona specjalnie dla programistów JavaScript. Pozwala na deklarowanie treści w dowolnym miejscu w kodzie. Przekształca deklaracje wielojęzycznych treści w ustrukturyzowane słowniki, które można łatwo zintegrować w kodzie. Korzystając z TypeScript, Intlayer sprawia, że rozwój jest bardziej solidny i efektywny.

Dlaczego stworzono Intlayer?

Intlayer powstał, aby rozwiązać powszechny problem, który dotyka wszystkie popularne biblioteki i18n, takie jak next-intl, react-i18next, react-intl, next-i18next, react-intl oraz 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 tutaj z użyciem 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 rozwoju i sprawia, że baza kodu jest trudniejsza w utrzymaniu z kilku powodów:

1. Dla każdego nowo utworzonego komponentu powinieneś:

   • Utworzyć nowy zasób/przestrzeń nazw w folderze locales
   • Pamiętać o zaimportowaniu nowej przestrzeni nazw na swojej stronie
   • Przetłumaczyć swoją treść (często wykonywane ręcznie przez kopiuj/wklej z dostawców AI)

2. Dla każdej zmiany wprowadzanej w Twoich komponentach powinieneś:

   • Wyszukać powiązany zasób/przestrzeń nazw (znajdującą się daleko od komponentu)
   • Przetłumaczyć swoją zawartość
   • Upewnić się, że Twoja zawartość jest aktualna dla każdej lokalizacji
   • Zweryfikować, czy Twoja przestrzeń nazw nie zawiera nieużywanych kluczy/wartości
   • Upewnić się, że struktura Twoich plików JSON jest taka sama dla wszystkich lokalizacji

W profesjonalnych projektach korzystających z tych rozwiązań często używa się platform lokalizacyjnych, które pomagają zarządzać tłumaczeniem Twojej zawartości. Jednak może to szybko stać się kosztowne dla dużych projektów.

Aby rozwiązać ten problem, Intlayer przyjmuje podejście, które ogranicza zakres Twojej zawartości do pojedynczego komponentu i utrzymuje ją blisko komponentu, tak jak często 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>;};

To podejście pozwala na:

1. Zwiększenie szybkości rozwoju

   • Pliki .content.{{ts|mjs|cjs|json}} można tworzyć za pomocą rozszerzenia VSCode
   • Narzędzia AI do autouzupełniania w twoim IDE (takie jak GitHub Copilot) mogą pomóc w deklarowaniu twoich treści, redukując kopiuj/wklej

2. Oczyszczenie twojej bazy kodu

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

3. Łatwiejsze duplikowanie twoich komponentów i powiązanych z nimi treści (np. komponenty logowania/rejestracji itp.)

   • Ograniczając ryzyko wpływu na treści innych komponentów
   • Poprzez kopiowanie i wklejanie zawartości z jednej aplikacji do drugiej bez zewnętrznych zależności

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

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

5. Zmniejsz koszt rozumowania dla agentów AI przy deklarowaniu Twojej wielojęzycznej zawartości

   • Agent AI nie będzie musiał skanować całej bazy kodu, aby wiedzieć, gdzie zaimplementować Twoją zawartość
   • Tłumaczenia mogą być łatwo wykonane przez narzędzia AI do autouzupełniania w Twoim IDE (takie jak GitHub Copilot)

6. Optymalizuj wydajność ładowania

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

Dodatkowe funkcje Intlayer

Funkcja	Opis
	Wsparcie dla 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 wieloma innymi.
	Zarządzanie treścią oparte na JavaScript Wykorzystaj elastyczność JavaScript do efektywnego definiowania i zarządzania swoją treścią. - Deklaracja treści
	Plik Deklaracji Treści dla Każdego Języka Przyspiesz swój rozwój, deklarując treść tylko raz, przed automatycznym generowaniem. - Plik Deklaracji Treści dla Każdego Języka
	Środowisko z Bezpieczeństwem Typów Wykorzystaj TypeScript, aby zapewnić, że definicje treści i kod są wolne od błędów, jednocześnie korzystając z autouzupełniania w IDE. - Konfiguracja TypeScript
	Uproszczona konfiguracja Rozpocznij pracę szybko przy minimalnej konfiguracji. Łatwo dostosuj ustawienia dotyczące 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 fragmentu treści. Pobierz całą swoją zawartość bezpośrednio za pomocą jednego hooka. - Integracja z React
	Spójna implementacja komponentów serwerowych Idealnie dopasowana do komponentów serwerowych Next.js, używaj tej samej implementacji zarówno dla komponentów klienta, jak i serwera, bez potrzeby przekazywania funkcji t przez każdy komponent serwerowy. - Komponenty serwerowe
	Zorganizowana baza kodu Utrzymuj swoją bazę kodu w lepszym porządku: 1 komponent = 1 słownik w tym samym folderze. Tłumaczenia blisko odpowiednich komponentów zwiększają łatwość utrzymania i przejrzystość. - Jak działa Intlayer
	Ulepszone routowanie Pełne wsparcie routingu aplikacji, płynnie dostosowujące się do złożonych struktur aplikacji, dla Next.js, React, Vite, Vue.js itp. - Poznaj integrację z Next.js
	Wsparcie dla Markdown Importuj i interpretuj pliki lokalizacyjne oraz zdalne pliki Markdown dla wielojęzycznych treści, takich jak polityki prywatności, dokumentacja itp. Interpretuj i udostępniaj metadane Markdown w swoim kodzie. - Pliki treści
	Darmowy edytor wizualny i CMS Darmowy edytor wizualny i CMS dostępne dla twórców treści, eliminując potrzebę korzystania z platformy lokalizacyjnej. Utrzymuj synchronizację treści za pomocą Gita lub całkowicie bądź częściowo zewnętrznie zarządzaj treścią za pomocą CMS. - Edytor Intlayer - CMS Intlayer
	Treeshakowalna zawartość Treeshakowalna zawartość, zmniejszająca rozmiar finalnego bundla. Ładuje zawartość na poziomie komponentu, wykluczając nieużywaną zawartość z Twojego bundla. Wspiera lazy loading, aby zwiększyć efektywność ładowania aplikacji. - Optymalizacja budowania aplikacji
	Renderowanie statyczne Nie blokuje renderowania statycznego. - Integracja z Next.js
	Tłumaczenie wspomagane AI Przekształć swoją stronę internetową na 231 języków za pomocą jednego kliknięcia, korzystając z zaawansowanych narzędzi tłumaczeniowych Intlayer opartych na AI, używając własnego dostawcy AI/klucza API. - Integracja CI/CD - Intlayer CLI - Automatyczne wypełnianie
	Integracja serwera MCP Udostępnia 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 dostarcza rozszerzenie do VSCode, które pomaga zarządzać Twoimi treściami i tłumaczeniami, budować słowniki, tłumaczyć zawartość i wiele więcej. - Rozszerzenie VSCode
	Interoperacyjność Umożliwia interoperacyjność z react-i18next, next-i18next, next-intl oraz 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 GitHub

Gwiazdki na GitHub są silnym wskaźnikiem popularności projektu, zaufania społeczności oraz długoterminowej istotności. Choć nie stanowią bezpośredniej miary jakości technicznej, odzwierciedlają, ilu deweloperów uważa projekt za użyteczny, śledzi jego rozwój i prawdopodobnie go zaadaptuje. Przy ocenie wartości projektu, gwiazdki pomagają porównać zainteresowanie różnymi alternatywami oraz dostarczają wglądu w rozwój ekosystemu.

Gwiazdy na GitHubie są silnym wskaźnikiem popularności projektu, zaufania społeczności oraz jego długoterminowej istotności. Choć nie są bezpośrednią miarą jakości technicznej, odzwierciedlają, ilu deweloperów uważa projekt za użyteczny, śledzi jego rozwój i jest skłonnych go przyjąć. Przy szacowaniu wartości projektu, gwiazdy pomagają porównać zainteresowanie różnymi alternatywami oraz dostarczają wglądu w rozwój ekosystemu.

Interoperacyjność

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

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

Zapoznaj się z opcjami dictionaryOutput oraz i18nextResourcesDir, aby uzyskać więcej szczegółów.