@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/ko/i18n_using_next-intl.md

@@ -73,6 +73,7 @@ className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-
 title="Demo CodeSandbox - Intlayer를 사용하여 애플리케이션을 국제화하는 방법"
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 loading="lazy"
+/>
 
 > GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/next-intl-template)을 참조하세요.
 
@@ -108,7 +109,9 @@ loading="lazy"
         └── ServerComponent.tsx
 ```
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 npm을 사용하여 필요한 패키지를 설치하세요:
 
@@ -126,7 +129,9 @@ yarn add next-intl
 
 - **next-intl**: Next.js App Router용 핵심 국제화 라이브러리로, 번역 관리를 위한 훅, 서버 함수, 클라이언트 프로바이더를 제공합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 지원하는 로케일을 정의하고 next-intl의 요청 구성을 설정하는 구성 파일을 만드세요. 이 파일은 i18n 설정의 단일 진실 소스로 작동하며 애플리케이션 전반에 걸쳐 타입 안전성을 보장합니다.
 
@@ -210,7 +215,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### 3단계: 동적 로케일 라우트 정의
+</Step>
+
+<Step number={3} title="동적 로케일 라우트 정의">
 
 앱 폴더에 `[locale]` 디렉토리를 생성하여 로케일 기반 동적 라우팅을 설정하세요. 이를 통해 Next.js는 각 로케일이 URL 세그먼트가 되는 로케일 기반 라우팅을 처리할 수 있습니다 (예: `/en/about`, `/fr/about`).
 
@@ -299,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### 4단계: 번역 파일 생성하기
+</Step>
+
+<Step number={4} title="번역 파일 생성하기">
 
 각 로케일과 네임스페이스별로 JSON 파일을 생성하세요. 이 구조는 번역을 논리적으로 구성하고 각 페이지에 필요한 번역만 로드할 수 있게 해줍니다.
 
@@ -341,7 +350,9 @@ export default async function AboutPage({
 }
 ```
 
-### 5단계: 페이지에서 번역 활용하기
+</Step>
+
+<Step number={5} title="페이지에서 번역 활용하기">
 
 서버에서 번역을 로드하고 이를 서버 및 클라이언트 컴포넌트 모두에 전달하는 페이지 컴포넌트를 만드세요. 이렇게 하면 렌더링 전에 번역이 로드되어 콘텐츠 깜박임을 방지할 수 있습니다.
 
@@ -392,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### 6단계: 클라이언트 컴포넌트에서 번역 사용하기
+</Step>
+
+<Step number={6} title="클라이언트 컴포넌트에서 번역 사용하기">
 
 클라이언트 컴포넌트는 `useTranslations` 및 `useFormatter` 훅을 사용하여 번역 및 포맷팅 기능에 접근할 수 있습니다. 이 훅들은 `NextIntlClientProvider` 컨텍스트에서 값을 읽어옵니다.
 
@@ -428,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### 7단계: 서버 컴포넌트에서 번역 사용하기
+</Step>
+
+<Step number={7} title="서버 컴포넌트에서 번역 사용하기">
 
 서버 컴포넌트는 React 훅을 사용할 수 없으므로, 부모 컴포넌트로부터 props를 통해 번역과 포매터를 전달받습니다. 이 방법은 서버 컴포넌트를 동기적으로 유지하며 클라이언트 컴포넌트 내부에 중첩될 수 있게 합니다.
 
@@ -460,9 +475,9 @@ const ServerComponent = ({
 
 > 페이지나 레이아웃에서 `next-intl/server`의 `getTranslations`와 `getFormatter`를 사용하여 번역과 포맷팅을 미리 계산한 후, 이를 props로 서버 컴포넌트에 전달하세요.
 
----
+</Step>
 
-### (선택 사항) 8단계: 콘텐츠의 언어 변경하기
+<Step number={8} title="콘텐츠의 언어 변경하기" isOptional={true}>
 
 next-intl을 사용하여 콘텐츠의 언어를 변경하려면, 동일한 경로명을 가리키면서 로케일을 전환하는 로케일 인식 링크를 렌더링하세요. 프로바이더가 URL을 자동으로 재작성하므로 현재 경로만 지정하면 됩니다.
 
@@ -534,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (선택 사항) 9단계: 현지화된 Link 컴포넌트 사용하기
+</Step>
+
+<Step number={9} title="현지화된 Link 컴포넌트 사용하기" isOptional={true}>
 
 `next-intl`은 활성 로케일을 자동으로 적용하는 현지화된 링크 컴포넌트를 포함하는 서브패키지 `next-intl/navigation`을 제공합니다. 우리는 이미 `@/i18n` 파일에서 이를 추출해 두었으므로 다음과 같이 사용할 수 있습니다:
 
@@ -544,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (선택 사항) 10단계: 서버 액션 내에서 활성 로케일 접근하기
+</Step>
+
+<Step number={10} title="서버 액션 내에서 활성 로케일 접근하기" isOptional={true}>
 
 서버 액션은 `next-intl/server`를 사용하여 현재 로케일을 읽을 수 있습니다. 이는 현지화된 이메일을 보내거나 제출된 데이터와 함께 언어 선호도를 저장하는 데 유용합니다.
 
@@ -567,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale`는 `next-intl` 프록시가 설정한 locale을 읽기 때문에 서버 어디서나 작동합니다: Route Handlers, Server Actions, 그리고 edge functions.
 
-### (선택 사항) 11단계: 메타데이터 국제화하기
+</Step>
+
+<Step number={11} title="메타데이터 국제화하기" isOptional={true}>
 
 콘텐츠 번역도 중요하지만, 국제화의 주요 목표는 웹사이트를 전 세계에 더 잘 보이게 만드는 것입니다. I18n은 적절한 SEO를 통해 웹사이트 가시성을 향상시키는 놀라운 수단입니다.
 
@@ -606,7 +627,9 @@ export async function generateMetadata({
 // ... 페이지 나머지 코드
 ```
 
-### (선택 사항) 12단계: 사이트맵 국제화하기
+</Step>
+
+<Step number={12} title="사이트맵 국제화하기" isOptional={true}>
 
 모든 로케일 버전의 페이지를 포함하는 사이트맵을 생성하세요. 이는 검색 엔진이 모든 언어 버전의 콘텐츠를 발견하고 색인화하는 데 도움이 됩니다.
 
@@ -660,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (선택 사항) 13단계: robots.txt 국제화하기
+</Step>
+
+<Step number={13} title="robots.txt 국제화하기" isOptional={true}>
 
 보호된 경로의 모든 로케일 버전을 적절히 처리하는 robots.txt 파일을 만드세요. 이를 통해 검색 엔진이 어떤 언어로든 관리자(admin)나 대시보드 페이지를 인덱싱하지 않도록 할 수 있습니다.
 
@@ -693,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (선택 사항) 14단계: 로케일 라우팅을 위한 프록시 설정
+</Step>
+
+<Step number={14} title="로케일 라우팅을 위한 프록시 설정" isOptional={true}>
 
 사용자의 선호 로케일을 자동으로 감지하고 적절한 로케일 접두사가 붙은 URL로 리디렉션하는 프록시를 만드세요. next-intl은 이를 자동으로 처리하는 편리한 프록시 함수를 제공합니다.
 
@@ -713,7 +740,9 @@ export const config = {
 };
 ```
 
-### (선택 사항) 15단계: 로케일에 대한 TypeScript 타입 설정
+</Step>
+
+<Step number={15} title="로케일에 대한 TypeScript 타입 설정" isOptional={true}>
 
 TypeScript 설정은 키에 대한 자동완성과 타입 안전성을 제공하는 데 도움이 됩니다.
 
@@ -739,7 +768,9 @@ declare module "next-intl" {
 
 이 코드는 모듈 확장(Module Augmentation)을 사용하여 locales와 messages를 next-intl의 AppConfig 타입에 추가합니다.
 
-### (선택 사항) 15단계: Intlayer를 사용하여 번역 자동화하기
+</Step>
+
+<Step number={16} title="Intlayer를 사용하여 번역 자동화하기" isOptional={true}>
 
 Intlayer는 애플리케이션의 현지화 과정을 지원하기 위해 설계된 **무료**이자 **오픈 소스** 라이브러리입니다. next-intl이 번역 로딩과 관리를 담당하는 반면, Intlayer는 번역 워크플로우를 자동화하는 데 도움을 줍니다.
 
@@ -764,3 +795,7 @@ Intlayer는 다음을 가능하게 합니다:
   Intlayer는 비주얼 에디터를 사용하여 콘텐츠를 편집할 수 있는 무료 비주얼 에디터를 제공합니다. [번역 비주얼 편집](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)에서 자세히 알아보세요.
 
 그리고 더 많은 기능들이 있습니다. Intlayer가 제공하는 모든 기능을 확인하려면 [Intlayer의 관심사 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/interest_of_intlayer.md)를 참조하세요.
+
+</Step>
+
+</Steps>

package/blog/pl/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Zanim przejdziemy do implementacji, oto kilka praktyk, których powinieneś prze
   title="Demo CodeSandbox - Jak internacjonalizować swoją aplikację za pomocą Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Zobacz [Szablon Aplikacji](https://github.com/aymericzip/next-i18next-template) na GitHub.
 
@@ -116,7 +117,9 @@ Oto struktura projektu, którą będziemy tworzyć:
         └── ServerComponent.tsx
 ```
 
-### Krok 1: Instalacja zależności
+<Steps>
+
+<Step number={1} title="Instalacja zależności">
 
 Zainstaluj niezbędne pakiety za pomocą npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Powiązania React dla i18next, które dostarczają hooki takie jak `useTranslation` dla komponentów klienckich.
 - **i18next-resources-to-backend**: Wtyczka umożliwiająca dynamiczne ładowanie plików tłumaczeń, pozwalająca ładować tylko potrzebne przestrzenie nazw.
 
-### Krok 2: Skonfiguruj swój projekt
+</Step>
+
+<Step number={2} title="Skonfiguruj swój projekt">
 
 Utwórz plik konfiguracyjny, aby zdefiniować obsługiwane lokalizacje, domyślną lokalizację oraz funkcje pomocnicze do lokalizacji URL. Ten plik służy jako pojedyncze źródło prawdy dla Twojej konfiguracji i18n i zapewnia bezpieczeństwo typów w całej aplikacji.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Krok 3: Centralizacja przestrzeni nazw tłumaczeń
+</Step>
+
+<Step number={3} title="Centralizacja przestrzeni nazw tłumaczeń">
 
 Utwórz jedno źródło prawdy dla każdej przestrzeni nazw, którą udostępnia Twoja aplikacja. Ponowne użycie tej listy utrzymuje synchronizację kodu serwera, klienta i narzędzi oraz umożliwia silne typowanie pomocników tłumaczeń.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Krok 4: Silne typowanie kluczy tłumaczeń za pomocą TypeScript
+</Step>
+
+<Step number={4} title="Silne typowanie kluczy tłumaczeń za pomocą TypeScript">
 
 Rozszerz `i18next`, aby wskazywał na Twoje kanoniczne pliki językowe (zazwyczaj angielskie). TypeScript wtedy wywnioskuje poprawne klucze dla każdej przestrzeni nazw, dzięki czemu wywołania `t()` są sprawdzane kompleksowo.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Krok 5: Skonfiguruj inicjalizację i18n po stronie serwera
+</Step>
+
+<Step number={5} title="Skonfiguruj inicjalizację i18n po stronie serwera">
 
 Utwórz funkcję inicjalizacji po stronie serwera, która ładuje tłumaczenia dla komponentów serwerowych. Ta funkcja tworzy osobną instancję i18next do renderowania po stronie serwera, zapewniając, że tłumaczenia są załadowane przed renderowaniem.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Krok 6: Utwórz klienta i18n Provider
+</Step>
+
+<Step number={6} title="Utwórz klienta i18n Provider">
 
 Utwórz komponent klienta, który opakuje Twoją aplikację kontekstem i18next. Ten provider otrzymuje wstępnie załadowane tłumaczenia z serwera, aby zapobiec błyskowi nieprzetłumaczonej zawartości (FOUC) i uniknąć podwójnego pobierania.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Krok 7: Zdefiniuj dynamiczne trasy lokalizacji
+</Step>
+
+<Step number={7} title="Zdefiniuj dynamiczne trasy lokalizacji">
 
 Skonfiguruj dynamiczne routowanie dla lokalizacji, tworząc katalog `[locale]` w folderze aplikacji. Pozwala to Next.js obsługiwać routowanie oparte na lokalizacji, gdzie każda lokalizacja staje się segmentem URL (np. `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Krok 8: Utwórz pliki tłumaczeń
+</Step>
+
+<Step number={8} title="Utwórz pliki tłumaczeń">
 
 Utwórz pliki JSON dla każdego locale i przestrzeni nazw. Ta struktura pozwala na logiczne organizowanie tłumaczeń i ładowanie tylko tego, co jest potrzebne na każdej stronie.
 
@@ -493,7 +510,9 @@ Organizowanie tłumaczeń według przestrzeni nazw (np. `common.json`, `about.js
 }
 ```
 
-### Krok 9: Wykorzystanie tłumaczeń na Twoich stronach
+</Step>
+
+<Step number={9} title="Wykorzystanie tłumaczeń na Twoich stronach">
 
 Utwórz komponent strony, który inicjalizuje i18next po stronie serwera i przekazuje tłumaczenia zarówno do komponentów serwerowych, jak i klienckich. Zapewnia to załadowanie tłumaczeń przed renderowaniem i zapobiega migotaniu treści.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Krok 10: Używanie tłumaczeń w komponentach klienckich
+</Step>
+
+<Step number={10} title="Używanie tłumaczeń w komponentach klienckich">
 
 Komponenty klienckie mogą korzystać z hooka `useTranslation`, aby uzyskać dostęp do tłumaczeń. Ten hook zapewnia dostęp do funkcji tłumaczącej oraz instancji i18n, co pozwala na tłumaczenie treści i dostęp do informacji o lokalizacji.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Krok 11: Użycie tłumaczeń w komponentach serwerowych
+</Step>
+
+<Step number={11} title="Użycie tłumaczeń w komponentach serwerowych">
 
 Komponenty serwerowe nie mogą korzystać z hooków React, dlatego otrzymują tłumaczenia za pomocą propsów od komponentów nadrzędnych. Takie podejście utrzymuje komponenty serwerowe synchroniczne i pozwala na ich zagnieżdżanie wewnątrz komponentów klienckich.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Opcjonalny) Krok 12: Zmień język swojej zawartości
+<Step number={12} title="Zmień język swojej zawartości" isOptional={true}>
 
 Aby zmienić język swojej zawartości w Next.js, zalecanym sposobem jest używanie adresów URL z prefiksem lokalizacji oraz linków Next.js. Poniższy przykład odczytuje aktualną lokalizację z trasy, usuwa ją z nazwy ścieżki i renderuje jeden link na każdą dostępną lokalizację.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcjonalny) Krok 13: Zbuduj lokalizowany komponent Link
+</Step>
+
+<Step number={13} title="Zbuduj lokalizowany komponent Link" isOptional={true}>
 
 Ponowne użycie lokalizowanych URL-i w całej aplikacji utrzymuje spójność nawigacji i jest przyjazne dla SEO. Owiń `next/link` w małą pomocniczą funkcję, która dodaje prefiks aktywnego locale do wewnętrznych ścieżek, pozostawiając zewnętrzne URL-e bez zmian.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Wskazówka: Ponieważ `LocalizedLink` jest zamiennikiem typu drop-in, migruj stopniowo, zamieniając importy i pozwalając komponentowi obsługiwać adresy URL specyficzne dla lokalizacji.
 
-### (Opcjonalny) Krok 14: Uzyskanie aktywnej lokalizacji wewnątrz Server Actions
+</Step>
+
+<Step number={14} title="Uzyskanie aktywnej lokalizacji wewnątrz Server Actions" isOptional={true}>
 
 Server Actions często potrzebują aktualnej lokalizacji do e-maili, logowania lub integracji z zewnętrznymi usługami. Połącz ciasteczko lokalizacji ustawione przez Twój proxy z nagłówkiem `Accept-Language` jako zapasową opcję.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Ponieważ helper opiera się na ciasteczkach i nagłówkach Next.js, działa w Route Handlers, Server Actions oraz innych kontekstach dostępnych tylko po stronie serwera.
 
-### (Opcjonalny) Krok 15: Internacjonalizacja Twoich Metadanych
+</Step>
+
+<Step number={15} title="Internacjonalizacja Twoich Metadanych" isOptional={true}>
 
 Tłumaczenie treści jest ważne, ale głównym celem internacjonalizacji jest uczynienie Twojej strony bardziej widoczną na świecie. I18n to niesamowite narzędzie do poprawy widoczności Twojej strony poprzez odpowiednie SEO.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Opcjonalny) Krok 16: Internacjonalizacja mapy witryny
+</Step>
+
+<Step number={16} title="Internacjonalizacja mapy witryny" isOptional={true}>
 
 Wygeneruj mapę witryny, która zawiera wszystkie wersje językowe Twoich stron. Pomaga to wyszukiwarkom odnaleźć i zaindeksować wszystkie wersje językowe Twoich treści.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcjonalny) Krok 17: Internacjonalizacja pliku robots.txt
+</Step>
+
+<Step number={17} title="Internacjonalizacja pliku robots.txt" isOptional={true}>
 
 Utwórz plik robots.txt, który prawidłowo obsługuje wszystkie wersje językowe chronionych tras. Zapewnia to, że wyszukiwarki nie będą indeksować stron admina ani panelu w żadnym języku.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcjonalny) Krok 18: Skonfiguruj Middleware dla trasowania lokalizacji
+</Step>
+
+<Step number={18} title="Skonfiguruj Middleware dla trasowania lokalizacji" isOptional={true}>
 
 Utwórz proxy, które automatycznie wykryje preferowaną lokalizację użytkownika i przekieruje go do odpowiedniego adresu URL z prefiksem lokalizacji. Poprawia to doświadczenie użytkownika, pokazując treści w jego preferowanym języku.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (Opcjonalny) Krok 19: Automatyzuj swoje tłumaczenia za pomocą Intlayer
+</Step>
+
+<Step number={19} title="Automatyzuj swoje tłumaczenia za pomocą Intlayer" isOptional={true}>
 
 Intlayer to **bezpłatna** i **otwartoźródłowa** biblioteka zaprojektowana, aby wspierać proces lokalizacji w Twojej aplikacji. Podczas gdy i18next zajmuje się ładowaniem i zarządzaniem tłumaczeniami, Intlayer pomaga zautomatyzować cały proces tłumaczeniowy.
 
@@ -1084,3 +1121,7 @@ Intlayer pozwala Ci na:
   Intlayer oferuje darmowy edytor wizualny do edycji Twoich treści za pomocą edytora wizualnego. Dowiedz się więcej o [wizualnej edycji tłumaczeń](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md).
 
 I wiele więcej. Aby odkryć wszystkie funkcje oferowane przez Intlayer, zapoznaj się z dokumentacją [Zainteresowanie Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/pl/i18n_using_next-intl.md

@@ -107,7 +107,9 @@ Oto struktura projektu, którą będziemy tworzyć:
         └── ServerComponent.tsx
 ```
 
-### Krok 1: Instalacja zależności
+<Steps>
+
+<Step number={1} title="Instalacja zależności">
 
 Zainstaluj niezbędne pakiety za pomocą npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: Podstawowa biblioteka do internacjonalizacji dla Next.js App Router, która dostarcza hooki, funkcje serwerowe oraz klienta do zarządzania tłumaczeniami.
 
-### Krok 2: Konfiguracja projektu
+</Step>
+
+<Step number={2} title="Konfiguracja projektu">
 
 Utwórz plik konfiguracyjny, który definiuje obsługiwane lokalizacje i konfiguruje ustawienia żądań next-intl. Ten plik służy jako pojedyncze źródło prawdy dla Twojej konfiguracji i18n oraz zapewnia bezpieczeństwo typów w całej aplikacji.
 
@@ -210,7 +214,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Krok 3: Definiowanie dynamicznych tras lokalizacji
+</Step>
+
+<Step number={3} title="Definiowanie dynamicznych tras lokalizacji">
 
 Skonfiguruj dynamiczne routowanie dla lokalizacji, tworząc katalog `[locale]` w folderze aplikacji. Pozwala to Next.js obsługiwać routowanie oparte na lokalizacji, gdzie każda lokalizacja staje się segmentem URL (np. `/en/about`, `/fr/about`).
 
@@ -298,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### Krok 4: Utwórz pliki tłumaczeń
+</Step>
+
+<Step number={4} title="Utwórz pliki tłumaczeń">
 
 Utwórz pliki JSON dla każdego locale i namespace. Ta struktura pozwala na logiczne organizowanie tłumaczeń oraz ładowanie tylko tego, co jest potrzebne na każdej stronie.
 
@@ -340,7 +348,9 @@ Organizowanie tłumaczeń według namespace (np. `common.json`, `about.json`) um
 }
 ```
 
-### Krok 5: Wykorzystaj tłumaczenia na swoich stronach
+</Step>
+
+<Step number={5} title="Wykorzystaj tłumaczenia na swoich stronach">
 
 Utwórz komponent strony, który ładuje tłumaczenia po stronie serwera i przekazuje je zarówno do komponentów serwerowych, jak i klienckich. Zapewnia to, że tłumaczenia są załadowane przed renderowaniem i zapobiega migotaniu treści.
 
@@ -391,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### Krok 6: Używanie tłumaczeń w komponentach klienckich
+</Step>
+
+<Step number={6} title="Używanie tłumaczeń w komponentach klienckich">
 
 Komponenty klienckie mogą używać hooków `useTranslations` i `useFormatter`, aby uzyskać dostęp do tłumaczeń i funkcji formatowania. Hooki te odczytują dane z kontekstu `NextIntlClientProvider`.
 
@@ -427,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Krok 7: Używanie tłumaczeń w komponentach serwerowych
+</Step>
+
+<Step number={7} title="Używanie tłumaczeń w komponentach serwerowych">
 
 Komponenty serwerowe nie mogą używać hooków React, dlatego otrzymują tłumaczenia i formatery przez propsy od komponentów nadrzędnych. Takie podejście utrzymuje komponenty serwerowe synchroniczne i pozwala na ich zagnieżdżanie wewnątrz komponentów klienckich.
 
@@ -459,9 +473,9 @@ const ServerComponent = ({
 
 > Na swojej stronie/układzie użyj `getTranslations` i `getFormatter` z `next-intl/server`, aby wstępnie obliczyć tłumaczenia i formatowanie, a następnie przekaż je jako propsy do komponentów serwerowych.
 
----
+</Step>
 
-### (Opcjonalny) Krok 8: Zmień język swojej zawartości
+<Step number={8} title="Zmień język swojej zawartości" isOptional={true}>
 
 Aby zmienić język swojej zawartości za pomocą next-intl, renderuj linki uwzględniające lokalizację, które wskazują na tę samą ścieżkę, zmieniając jednocześnie lokalizację. Provider automatycznie przepisuje URL-e, więc musisz tylko wskazać aktualną trasę.
 
@@ -533,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcjonalny) Krok 9: Użyj lokalizowanego komponentu Link
+</Step>
+
+<Step number={9} title="Użyj lokalizowanego komponentu Link" isOptional={true}>
 
 `next-intl` dostarcza podpakiet `next-intl/navigation`, który zawiera lokalizowany komponent linku automatycznie stosujący aktywną lokalizację. Już wyodrębniliśmy go dla Ciebie w pliku `@/i18n`, więc możesz go użyć w ten sposób:
 
@@ -543,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Opcjonalny) Krok 10: Uzyskaj dostęp do aktywnej lokalizacji w Server Actions
+</Step>
+
+<Step number={10} title="Uzyskaj dostęp do aktywnej lokalizacji w Server Actions" isOptional={true}>
 
 Server Actions mogą odczytać aktualną lokalizację używając `next-intl/server`. Jest to przydatne do wysyłania zlokalizowanych e-maili lub przechowywania preferencji językowych wraz z przesłanymi danymi.
 
@@ -566,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` odczytuje locale ustawione przez proxy `next-intl`, więc działa wszędzie na serwerze: w Route Handlers, Server Actions i funkcjach edge.
 
-### (Opcjonalny) Krok 11: Internacjonalizacja metadanych
+</Step>
+
+<Step number={11} title="Internacjonalizacja metadanych" isOptional={true}>
 
 Tłumaczenie treści jest ważne, ale głównym celem internacjonalizacji jest uczynienie Twojej strony bardziej widoczną dla świata. I18n to niesamowita dźwignia do poprawy widoczności Twojej strony poprzez odpowiednie SEO.
 
@@ -605,7 +625,9 @@ export async function generateMetadata({
 // ... Reszta kodu strony
 ```
 
-### (Opcjonalny) Krok 12: Internacjonalizacja Twojej mapy witryny
+</Step>
+
+<Step number={12} title="Internacjonalizacja Twojej mapy witryny" isOptional={true}>
 
 Wygeneruj mapę witryny, która zawiera wszystkie wersje językowe Twoich stron. Pomaga to wyszukiwarkom odnaleźć i zaindeksować wszystkie wersje językowe Twoich treści.
 
@@ -659,7 +681,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcjonalny) Krok 13: Internacjonalizacja pliku robots.txt
+</Step>
+
+<Step number={13} title="Internacjonalizacja pliku robots.txt" isOptional={true}>
 
 Utwórz plik robots.txt, który prawidłowo obsługuje wszystkie wersje językowe Twoich chronionych ścieżek. Zapewnia to, że wyszukiwarki nie będą indeksować stron admina ani panelu w żadnym języku.
 
@@ -692,7 +716,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcjonalny) Krok 14: Skonfiguruj Proxy dla trasowania lokalizacji
+</Step>
+
+<Step number={14} title="Skonfiguruj Proxy dla trasowania lokalizacji" isOptional={true}>
 
 Utwórz proxy, które automatycznie wykryje preferowaną lokalizację użytkownika i przekieruje go na odpowiedni adres URL z prefiksem lokalizacji. next-intl dostarcza wygodną funkcję proxy, która obsługuje to automatycznie.
 
@@ -712,7 +738,9 @@ export const config = {
 };
 ```
 
-### (Opcjonalny) Krok 15: Skonfiguruj typy TypeScript dla lokalizacji
+</Step>
+
+<Step number={15} title="Skonfiguruj typy TypeScript dla lokalizacji" isOptional={true}>
 
 Konfiguracja TypeScript pomoże Ci uzyskać autouzupełnianie i bezpieczeństwo typów dla Twoich kluczy.
 
@@ -738,7 +766,9 @@ declare module "next-intl" {
 
 Ten kod użyje Module Augmentation, aby dodać locales i messages do typu AppConfig w next-intl.
 
-### (Opcjonalny) Krok 15: Automatyzuj swoje tłumaczenia za pomocą Intlayer
+</Step>
+
+<Step number={16} title="Automatyzuj swoje tłumaczenia za pomocą Intlayer" isOptional={true}>
 
 Intlayer to **bezpłatna** i **otwartoźródłowa** biblioteka zaprojektowana, aby wspierać proces lokalizacji w Twojej aplikacji. Podczas gdy next-intl zajmuje się ładowaniem i zarządzaniem tłumaczeniami, Intlayer pomaga zautomatyzować przepływ pracy związany z tłumaczeniami.
 
@@ -763,3 +793,7 @@ Intlayer pozwala Ci na:
   Intlayer oferuje darmowy edytor wizualny do edycji Twoich treści za pomocą edytora wizualnego. Dowiedz się więcej o [wizualnej edycji Twoich tłumaczeń](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md).
 
 I więcej. Aby odkryć wszystkie funkcje oferowane przez Intlayer, prosimy zapoznać się z dokumentacją [Zainteresowanie Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>