@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/pl/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Jak przetłumaczyć aplikację Tanstack Start używając Solid.js w 2026 roku
-description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji Tanstack Start, korzystając z Intlayer i Solid.js. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby stworzyć wielojęzyczną aplikację z routingiem uwzględniającym lokalizację (locale).
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
+description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji TanStack Start + Solid. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
 keywords:
   - Internacjonalizacja
   - Dokumentacja
@@ -37,17 +37,37 @@ history:
 
 Ten przewodnik pokazuje, jak zintegrować **Intlayer** w celu zapewnienia bezproblemowej internacjonalizacji w projektach Tanstack Start z Solid.js, z routingiem uwzględniającym lokalizację, wsparciem TypeScript oraz nowoczesnymi praktykami programistycznymi.
 
-## Czym jest Intlayer?
+## Dlaczego Interlayer zamiast alternatyw?
 
-**Intlayer** to innowacyjna biblioteka internacjonalizacji (i18n) o otwartym kodzie źródłowym, zaprojektowana w celu uproszczenia obsługi wielu języków w nowoczesnych aplikacjach internetowych.
+W porównaniu do głównych rozwiązań, takich jak „react-i18next” lub „i18next”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
 
-Dzięki Intlayer możesz:
+**Pełne pokrycie TanStack Start**
 
-- **Łatwo zarządzać tłumaczeniami** za pomocą deklaratywnych słowników na poziomie komponentów.
-- **Dynamicznie lokalizować metadane, trasy (routes) i treść**.
-- **Zapewnić wsparcie TypeScript** dzięki automatycznie generowanym typom, co poprawia autouzupełnianie i wykrywanie błędów.
-- **Korzystać z zaawansowanych funkcji**, takich jak dynamiczne wykrywanie i przełączanie języka.
-- **Włączyć routing uwzględniający język** dzięki systemowi routingu Tanstack Start opartemu na plikach.
+Intlayer jest zoptymalizowany do doskonałej współpracy z TanStack Start i Solid, oferując **routing wielojęzyczny**, **mapę witryny** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n).
+
+**Rozmiar bundle'a**
+
+Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary bundle'a i stron nawet o 50%**.
+
+**Łatwość konserwacji**
+
+Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
+
+**Agent AI**
+
+Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
+
+**Automatyzacja**
+
+Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
+
+**Wydajność**
+
+Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
+
+**Skalowanie bez użycia dewelopera**
+
+Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
 
 ---
 
@@ -85,11 +105,15 @@ Dzięki Intlayer możesz:
 
 Zobacz [Szablon Aplikacji](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) na GitHubie.
 
-### Krok 1: Utworzenie projektu
+<Steps>
+
+<Step number={1} title="Utworzenie projektu">
 
 Najpierw utwórz nowy projekt TanStack Start, postępując zgodnie z przewodnikiem [Rozpoczęcie nowego projektu](https://tanstack.com/start/latest/docs/framework/solid/quick-start) na stronie TanStack Start.
 
-### Krok 2: Instalacja pakietów Intlayer
+</Step>
+
+<Step number={2} title="Instalacja pakietów Intlayer">
 
 Zainstaluj niezbędne pakiety za pomocą preferowanego menedżera pakietów:
 
@@ -127,7 +151,9 @@ bun x intlayer init
 - **vite-intlayer**
   Zawiera wtyczkę Vite do integracji Intlayer z [bundlerem Vite](https://vite.dev/guide/why.html#why-bundle-for-production), a także middleware do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami (cookies) i obsługi przekierowań adresów URL.
 
-### Krok 3: Konfiguracja Twojego projektu
+</Step>
+
+<Step number={3} title="Konfiguracja Twojego projektu">
 
 Utwórz plik konfiguracyjny, aby ustawić języki Twojej aplikacji:
 
@@ -148,7 +174,9 @@ export default config;
 
 > Za pomocą tego pliku konfiguracyjnego możesz skonfigurować zlokalizowane adresy URL, przekierowania middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
 
-### Krok 4: Integracja Intlayer w konfiguracji Vite
+</Step>
+
+<Step number={4} title="Integracja Intlayer w konfiguracji Vite">
 
 Dodaj wtyczkę intlayer do swojej konfiguracji:
 
@@ -176,7 +204,9 @@ export default defineConfig({
 
 > Wtyczka `intlayer()` Vite jest używana do integracji Intlayer z Vite. Zapewnia ona budowanie plików deklaracji treści i monitoruje je w trybie deweloperskim. Definiuje ona zmienne środowiskowe Intlayer wewnątrz aplikacji Vite. Dodatkowo zapewnia aliasy w celu zmniejszenia narzutu wydajnościowego.
 
-### Krok 5: Utworzenie Root Layoutu
+</Step>
+
+<Step number={5} title="Utworzenie Root Layoutu">
 
 Skonfiguruj swój layout główny (root layout), aby obsługiwał internacjonalizację, używając `useParams` do wykrywania bieżącego języka i ustawiając atrybuty `lang` oraz `dir` w tagu `html`.
 
@@ -217,7 +247,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Krok 6: Utworzenie Layoutu Językowego (opcjonalnie)
+</Step>
+
+<Step number={6} title="Utworzenie Layoutu Językowego">
 
 Utwórz layout, który obsługuje prefiks językowy i wykonuje walidację. Ten layout zapewni, że przetwarzane będą tylko prawidłowe języki.
 
@@ -252,7 +284,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Dla trybu `'prefix-all'` możesz preferować zamianę slotu na `$locale`.
 > Dla trybu `'no-prefix'` lub `'search-params'` możesz całkowicie usunąć ten slot.
 
-### Krok 7: Zadeklaruj swoją treść
+</Step>
+
+<Step number={7} title="Zadeklaruj swoją treść">
 
 Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
 
@@ -298,7 +332,9 @@ export default appContent;
 
 > Więcej szczegółów znajdziesz w [dokumentacji deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
 
-### Krok 8: Wykorzystaj komponenty i hooki uwzględniające lokalizację
+</Step>
+
+<Step number={8} title="Wykorzystaj komponenty i hooki uwzględniające lokalizację">
 
 Utwórz komponent `LocalizedLink` do nawigacji uwzględniającej język:
 
@@ -377,7 +413,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Krok 9: Użyj Intlayer na swoich stronach
+</Step>
+
+<Step number={9} title="Użyj Intlayer na swoich stronach">
 
 Zyskaj dostęp do słowników treści w całej aplikacji:
 
@@ -420,7 +458,9 @@ function RouteComponent() {
 >
 > Aby dowiedzieć się więcej o hooku `useIntlayer`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/solid-intlayer/useIntlayer.md).
 
-### Krok 10: Utworzenie komponentu Locale Switcher
+</Step>
+
+<Step number={10} title="Utworzenie komponentu Locale Switcher">
 
 Utwórz komponent pozwalający użytkownikom na zmianę języka:
 
@@ -464,7 +504,9 @@ export default LocaleSwitcher;
 >
 > Aby dowiedzieć się więcej o hooku `useLocale`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/solid-intlayer/useLocale.md).
 
-### Krok 11: Zarządzanie atrybutami HTML
+</Step>
+
+<Step number={11} title="Zarządzanie atrybutami HTML">
 
 Jak pokazano w Kroku 5, możesz zarządzać atrybutami `lang` oraz `dir` tagu `html` za pomocą `useParams` w swoim głównym komponencie (root component). Dzięki temu prawidłowe atrybuty zostaną ustawione zarówno na serwerze, jak i na kliencie.
 
@@ -483,7 +525,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Krok 12: Dodaj Middleware (opcjonalnie)
+</Step>
+
+<Step number={12} title="Dodaj Middleware">
 
 Możesz również użyć `intlayerProxy`, aby dodać routing po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje aktualny język na podstawie adresu URL i ustawi odpowiednie ciasteczko (cookie) języka. Jeśli nie określono języka, plugin określi najbardziej odpowiedni na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryty żaden język, nastąpi przekierowanie do domyślnego języka.
 
@@ -514,7 +558,9 @@ export default defineConfig({
 
 ---
 
-### Krok 13: Umiędzynarowienie metadanych (opcjonalnie)
+</Step>
+
+<Step number={13} title="Umiędzynarowienie metadanych">
 
 Możesz również użyć funkcji `getIntlayer`, aby uzyskać dostęp do swoich słowników treści wewnątrz loadera `head` w celu uzyskania metadanych uwzględniających lokalizację:
 
@@ -561,7 +607,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Krok 14: Pobieranie języka w akcjach serwera (opcjonalnie)
+</Step>
+
+<Step number={14} title="Pobieranie języka w akcjach serwera">
 
 Możesz chcieć uzyskać dostęp do bieżącego języka wewnątrz akcji serwera (server actions) lub punktów końcowych API.
 Możesz to zrobić, używając pomocnika `getLocale` z `intlayer`.
@@ -598,7 +646,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Krok 15: Zarządzanie stronami "nie znaleziono" (404) (opcjonalnie)
+</Step>
+
+<Step number={15} title="Zarządzanie stronami &quot;nie znaleziono&quot; (404)" isOptional={true}>
 
 Gdy użytkownik odwiedzi nieistniejącą stronę, możesz wyświetlić niestandardową stronę 404, a prefiks językowy może wpływać na sposób wyzwalania strony 404.
 
@@ -672,7 +722,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opcjonalnie) Krok 16: Wyodrębnij treść ze swoich komponentów
+</Step>
+
+<Step number={16} title="Wyodrębnij treść ze swoich komponentów" isOptional={true}>
 
 Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
 
@@ -785,7 +837,9 @@ bun run build # Lub bun run dev
 
 ---
 
-### Krok 17: Skonfiguruj TypeScript (opcjonalnie)
+</Step>
+
+<Step number={17} title="Skonfiguruj TypeScript">
 
 Intlayer używa rozszerzania modułów (module augmentation), aby czerpać korzyści z TypeScript i wzmocnić Twoją bazę kodu.
 
@@ -803,6 +857,10 @@ Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Konfiguracja Git
 
 Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć zakomitowania ich do repozytorium Git.

package/docs/pl/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Jak przetłumaczyć aplikację Tanstack Start w 2026
-description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji Tanstack Start za pomocą Intlayer. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby uczynić swoją aplikację wielojęzyczną z routingiem uwzględniającym lokalizację.
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
+description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji TanStack Start. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
 keywords:
   - Internacjonalizacja
   - Dokumentacja
@@ -54,17 +54,37 @@ history:
 
 Ten przewodnik pokazuje, jak zintegrować **Intlayer** dla płynnej internacjonalizacji w projektach Tanstack Start z routingiem uwzględniającym lokalizację, wsparciem TypeScript oraz nowoczesnymi praktykami programistycznymi.
 
-## Czym jest Intlayer?
+## Dlaczego Interlayer zamiast alternatyw?
 
-**Intlayer** to innowacyjna, open-source'owa biblioteka do internacjonalizacji (i18n), zaprojektowana, aby uprościć wsparcie wielojęzyczne w nowoczesnych aplikacjach webowych.
+W porównaniu do głównych rozwiązań, takich jak „react-i18next”, „use-intl” lub „paraglide”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
 
-Dzięki Intlayer możesz:
+**Pełne pokrycie TanStack Start**
 
-- **Łatwo zarządzać tłumaczeniami** za pomocą deklaratywnych słowników na poziomie komponentów.
-- **Dynamicznie lokalizować metadane**, trasy i zawartość.
-- **Zapewnić wsparcie TypeScript** dzięki automatycznie generowanym typom, co poprawia autouzupełnianie i wykrywanie błędów.
-- **Korzystać z zaawansowanych funkcji**, takich jak dynamiczne wykrywanie i przełączanie lokalizacji.
-- **Włączyć routing uwzględniający lokalizację** za pomocą systemu routingu opartego na plikach Tanstack Start.
+Intlayer jest w pełni zoptymalizowany pod kątem TanStack Start, zapewniając **wielojęzyczny routing**, **zarządzanie plikami cookie**, **generowanie mapy witryny**, **dynamiczne ładowanie treści** i wszystkie funkcje potrzebne do skalowania wysiłków związanych z internacjonalizacją (i18n).
+
+**Rozmiar bundle'a**
+
+Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary bundle'a i stron nawet o 50%**.
+
+**Łatwość konserwacji**
+
+Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
+
+**Agent AI**
+
+Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
+
+**Automatyzacja**
+
+Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
+
+**Wydajność**
+
+Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
+
+**Skalowanie bez użycia dewelopera**
+
+Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
 
 ---
 
@@ -102,11 +122,15 @@ Dzięki Intlayer możesz:
 
 Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-tanstack-start-template) na GitHub.
 
-### Krok 1: Utwórz projekt
+<Steps>
+
+<Step number={1} title="Utwórz projekt">
 
 Rozpocznij od utworzenia nowego projektu TanStack Start, postępując zgodnie z przewodnikiem [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) na stronie TanStack Start.
 
-### Krok 2: Zainstaluj pakiety Intlayer
+</Step>
+
+<Step number={2} title="Zainstaluj pakiety Intlayer">
 
 Zainstaluj niezbędne pakiety, używając preferowanego menedżera pakietów:
 
@@ -144,7 +168,9 @@ bun x intlayer init
 - **vite-intlayer**
   Zawiera wtyczkę Vite do integracji Intlayer z [bundlerem Vite](https://vite.dev/guide/why.html#why-bundle-for-production), a także middleware do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami oraz obsługi przekierowań URL.
 
-### Krok 3: Konfiguracja projektu
+</Step>
+
+<Step number={3} title="Konfiguracja projektu">
 
 Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:
 
@@ -165,7 +191,9 @@ export default config;
 
 > Za pomocą tego pliku konfiguracyjnego możesz ustawić lokalizowane adresy URL, przekierowania w middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
 
-### Krok 4: Integracja Intlayer w konfiguracji Vite
+</Step>
+
+<Step number={4} title="Integracja Intlayer w konfiguracji Vite">
 
 Dodaj wtyczkę intlayer do swojej konfiguracji:
 
@@ -195,7 +223,9 @@ export default config;
 
 > Wtyczka `intlayer()` dla Vite służy do integracji Intlayer z Vite. Zapewnia budowanie plików deklaracji treści oraz monitorowanie ich w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Vite. Dodatkowo dostarcza aliasy optymalizujące wydajność.
 
-### Krok 5: Utwórz układ główny (Root Layout)
+</Step>
+
+<Step number={5} title="Utwórz układ główny">
 
 Skonfiguruj swój główny układ, aby wspierać internacjonalizację, używając `useParams` do wykrywania aktualnej lokalizacji i ustawiając atrybuty `lang` i `dir` w tagu `html`.
 
@@ -255,7 +285,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Krok 6: Utwórz układ lokalizacji
+</Step>
+
+<Step number={6} title="Utwórz układ lokalizacji">
 
 Utwórz układ, który obsługuje prefiks lokalizacji i wykonuje walidację.
 
@@ -287,7 +319,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > W trybie `'prefix-all'` możesz woleć zmienić slot na `$locale`.
 > W trybach `'no-prefix'` lub `'search-params'` możesz całkowicie usunąć ten slot.
 
-### Krok 7: Zadeklaruj swoją treść
+</Step>
+
+<Step number={7} title="Zadeklaruj swoją treść">
 
 Twórz i zarządzaj deklaracjami treści, aby przechowywać tłumaczenia:
 
@@ -333,7 +367,9 @@ export default appContent;
 
 > Po więcej szczegółów odsyłamy do [dokumentacji deklaracji zawartości](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
 
-### Krok 8: Tworzenie komponentów i hooków uwzględniających lokalizację
+</Step>
+
+<Step number={8} title="Tworzenie komponentów i hooków uwzględniających lokalizację">
 
 Utwórz komponent `LocalizedLink` do nawigacji uwzględniającej lokalizację:
 
@@ -437,7 +473,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Krok 9: Wykorzystaj Intlayer na swoich stronach
+</Step>
+
+<Step number={9} title="Wykorzystaj Intlayer na swoich stronach">
 
 Uzyskaj dostęp do swoich słowników treści w całej aplikacji:
 
@@ -485,7 +523,9 @@ function RouteComponent() {
 
 > Aby dowiedzieć się więcej o hooku `useIntlayer`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/react-intlayer/useIntlayer.md).
 
-### Krok 10: Utwórz komponent przełącznika języka (Locale Switcher)
+</Step>
+
+<Step number={10} title="Utwórz komponent przełącznika języka">
 
 Utwórz komponent, który pozwoli użytkownikom zmieniać języki:
 
@@ -546,7 +586,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Aby dowiedzieć się więcej o hooku `useLocale`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/react-intlayer/useLocale.md).
 
-### Krok 11: Zarządzanie atrybutami HTML
+</Step>
+
+<Step number={11} title="Zarządzanie atrybutami HTML">
 
 Jak pokazano w Kroku 5, możesz zarządzać atrybutami `lang` i `dir` tagu `html` za pomocą `useParams` w swoim komponencie głównym. Zapewnia to, że poprawne atrybuty są ustawione zarówno na serwerze, jak i kliencie.
 
@@ -565,7 +607,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Krok 12: Dodaj middleware (Opcjonalnie)
+</Step>
+
+<Step number={12} title="Dodaj middleware">
 
 Możesz również użyć `intlayerProxy`, aby dodać routing po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje aktualną lokalizację na podstawie URL i ustawi odpowiednie ciasteczko lokalizacji. Jeśli nie zostanie określona żadna lokalizacja, plugin wybierze najbardziej odpowiednią na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryta żadna lokalizacja, nastąpi przekierowanie do domyślnej.
 
@@ -596,7 +640,9 @@ export default defineConfig({
 
 ---
 
-### Krok 13: Internacjonalizacja metadanych (Opcjonalnie)
+</Step>
+
+<Step number={13} title="Internacjonalizacja metadanych">
 
 Możesz również użyć hooka `getIntlayer`, aby uzyskać dostęp do słowników treści w całej aplikacji:
 
@@ -643,7 +689,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Krok 14: Pobieranie lokalizacji w akcjach serwerowych (Opcjonalnie)
+</Step>
+
+<Step number={14} title="Pobieranie lokalizacji w akcjach serwerowych">
 
 Możesz chcieć uzyskać dostęp do aktualnej lokalizacji wewnątrz swoich akcji serwerowych lub punktów końcowych API.
 Możesz to zrobić za pomocą pomocnika `getLocale` z `intlayer`.
@@ -680,7 +728,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Krok 15: Zarządzanie stronami "nie znaleziono" (Opcjonalnie)
+</Step>
+
+<Step number={15} title="Zarządzanie stronami &quot;nie znaleziono&quot;">
 
 Gdy użytkownik odwiedza nieistniejącą stronę, możesz wyświetlić niestandardową stronę "nie znaleziono", a prefiks lokalizacji może wpływać na sposób wyzwalania strony "nie znaleziono".
 
@@ -756,7 +806,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Krok 16: Konfiguracja TypeScript (Opcjonalnie)
+</Step>
+
+<Step number={16} title="Konfiguracja TypeScript">
 
 Intlayer używa rozszerzenia modułów (module augmentation), aby wykorzystać zalety TypeScript i wzmocnić Twoją bazę kodu.
 
@@ -774,7 +826,9 @@ Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane
 
 ---
 
-### (Opcjonalnie) Krok 17 : Wyodrębnij zawartość swoich komponentów
+</Step>
+
+<Step number={17} title="Wyodrębnij zawartość swoich komponentów" isOptional={true}>
 
 Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
 
@@ -872,6 +926,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Konfiguracja Git
 
 Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.