@intlayer/docs 7.3.15 → 7.4.0

package/docs/it/intlayer_with_tanstack.md

@@ -19,9 +19,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 7.4.0
+    date: 2025-12-11
+    changes: Introdotto validatePrefix e aggiunto il passaggio 14: Gestione delle pagine 404 con rotte localizzate.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Aggiunto passaggio 13: Recupera la lingua locale nelle server actions (Opzionale)
   - version: 6.5.2
     date: 2025-10-03
     changes: Aggiornamento documentazione
@@ -622,7 +625,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passo 14: Configurare TypeScript (Opzionale)
+### Passo 14: Gestire le pagine non trovate (Opzionale)
+
+Quando un utente visita una pagina inesistente, puoi visualizzare una pagina personalizzata di non trovata e il prefisso locale può influenzare il modo in cui viene attivata la pagina di non trovata.
+
+#### Comprendere la gestione 404 di TanStack Router con prefissi locale
+
+In TanStack Router, gestire le pagine 404 con route localizzate richiede un approccio multistrato:
+
+1. **Route 404 dedicata**: Una route specifica per visualizzare l'interfaccia utente 404
+2. **Validazione a livello di route**: Valida i prefissi locale e reindirizza quelli non validi a 404
+3. **Route catch-all**: Cattura tutti i percorsi non corrispondenti all'interno del segmento locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Questo crea una route dedicata /[locale]/404
+// Viene utilizzata sia come route diretta che importata come componente in altri file
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Esportato separatamente in modo che possa essere riutilizzato in notFoundComponent e route catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// La route radice funge da layout di livello superiore
+// Non gestisce i 404 direttamente - questo è delegato alle route figlie
+// Questo mantiene la radice semplice e consente alle route consapevoli della locale di gestire la propria logica 404
+export const Route = createRootRoute({
+  component: Outlet,
+});
+```
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { LocaleSwitcher } from "@/components/locale-switcher";
+import { NotFoundComponent } from "./404";
+
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad viene eseguito prima che la route venga renderizzata (sia sul server che sul client)
+  // È il posto ideale per validare il prefisso della locale
+  beforeLoad: ({ params }) => {
+    // Ottieni la locale dai parametri della route (non dagli header del server, poiché beforeLoad viene eseguito sia sul client che sul server)
+    const localeParam = params.locale;
+
+    // validatePrefix verifica se la locale è valida secondo la tua configurazione intlayer
+    // Restituisce: { isValid: boolean, localePrefix: string }
+    // - isValid: true se il prefisso corrisponde a una locale configurata (o è vuoto quando il prefisso è opzionale)
+    // - localePrefix: il prefisso validato o il prefisso della locale predefinito per i reindirizzamenti
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // La locale è valida, consenti alla route di renderizzarsi normalmente
+      return;
+    }
+
+    // Prefisso della locale non valido (ad esempio, /xyz/about dove "xyz" non è una locale valida)
+    // Reindirizza alla pagina 404 con un prefisso della locale valido
+    // Questo assicura che la pagina 404 sia ancora correttamente localizzata
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent viene chiamato quando una route figlia non esiste
+  // ad esempio, /en/pagina-inesistente attiva questo all'interno del layout /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Avvolgi l'intero segmento della locale con IntlayerProvider
+    // Torna a defaultLocale quando il parametro locale è undefined (modalità prefisso opzionale)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout avvolge il componente 404 con IntlayerProvider
+// Questo assicura che le traduzioni funzionino ancora sulla pagina 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Includi LocaleSwitcher in modo che gli utenti possano cambiare lingua anche su 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// La route $ (splat/catch-all) corrisponde a qualsiasi percorso che non corrisponde ad altre route
+// ad esempio, /en/qualche/percorso/profondamente/annidato/non-valido
+// Questo assicura che TUTTI i percorsi non corrispondenti all'interno di una locale mostrino la pagina 404
+// Senza questo, i percorsi profondi non corrispondenti potrebbero mostrare una pagina vuota o un errore
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Passo 15: Configurare TypeScript (Opzionale)
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
 

package/docs/ja/intlayer_with_tanstack.md

@@ -19,9 +19,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 7.4.0
+    date: 2025-12-11
+    changes: validatePrefix を導入し、ステップ14: ローカライズされたルートでの 404 ページ処理 を追加
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: ステップ13: サーバーアクション内でロケールを取得する方法（オプション）を追加
   - version: 5.8.1
     date: 2025-09-09
     changes: Tanstack Start 用に追加
@@ -594,7 +597,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### ステップ14: TypeScriptの設定（任意）
+### ステップ14: 見つからないページの管理（任意）
+
+ユーザーが存在しないページにアクセスした場合、カスタムの見つからないページを表示でき、ロケールプレフィックスが見つからないページのトリガー方法に影響を与える可能性があります。
+
+#### ロケールプレフィックスを使用したTanStack Routerの404処理を理解する
+
+TanStack Routerでは、ローカライズされたルートで404ページを処理するには、多層的なアプローチが必要です：
+
+1. **専用の404ルート**: 404 UIを表示するための特定のルート
+2. **ルートレベルの検証**: ロケールプレフィックスを検証し、無効なものを404にリダイレクト
+3. **キャッチオールルート**: ロケールセグメント内で一致しないすべてのパスをキャプチャ
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// これは専用の /[locale]/404 ルートを作成します
+// 直接ルートとして使用されるか、他のファイルでコンポーネントとしてインポートされます
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// notFoundComponent および catch-all ルートで再利用できるように個別にエクスポートされます
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// ルートルートは最上位レイアウトとして機能します
+// 404を直接処理しません - それは子ルートに委任されます
+// これにより、ルートをシンプルに保ち、ロケール対応ルートが独自の404ロジックを管理できるようになります
+export const Route = createRootRoute({
+  component: Outlet,
+});
+```
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { LocaleSwitcher } from "@/components/locale-switcher";
+import { NotFoundComponent } from "./404";
+
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoadはルートがレンダリングされる前に実行されます（サーバーとクライアントの両方で）
+  // ロケールプレフィックスを検証するのに理想的な場所です
+  beforeLoad: ({ params }) => {
+    // ルートパラメータからロケールを取得（サーバーヘッダーからではない。beforeLoadはクライアントとサーバーの両方で実行されるため）
+    const localeParam = params.locale;
+
+    // validatePrefixは、ロケールがintlayer設定に従って有効かどうかをチェックします
+    // 戻り値: { isValid: boolean, localePrefix: string }
+    // - isValid: プレフィックスが設定されたロケールと一致する場合（またはプレフィックスがオプションの場合は空）はtrue
+    // - localePrefix: 検証されたプレフィックスまたはリダイレクト用のデフォルトのロケールプレフィックス
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // ロケールが有効です。ルートが正常にレンダリングされるようにします
+      return;
+    }
+
+    // 無効なロケールプレフィックス（例: "xyz"が有効なロケールではない /xyz/about）
+    // 有効なロケールプレフィックスで404ページにリダイレクト
+    // これにより、404ページが適切にローカライズされたままになります
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponentは子ルートが存在しないときに呼び出されます
+  // 例: /en/存在しないページが /en レイアウト内でこれをトリガーします
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // ロケールセグメント全体をIntlayerProviderでラップ
+    // ロケールパラメータがundefinedの場合、defaultLocaleにフォールバック（オプションプレフィックスモード）
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayoutは404コンポーネントをIntlayerProviderでラップします
+// これにより、404ページで翻訳が引き続き機能することが保証されます
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* ユーザーが404でも言語を変更できるようにLocaleSwitcherを含める */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// $ (splat/catch-all) ルートは、他のルートと一致しない任意のパスに一致します
+// 例: /en/いくつかの/深く/ネストされた/無効な/パス
+// これにより、ロケール内の一致しないすべてのパスが404ページを表示することが保証されます
+// これがないと、一致しない深いパスが空白ページやエラーを表示する可能性があります
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### ステップ15: TypeScriptの設定（任意）
 
 Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースを強化します。
 

package/docs/ko/intlayer_with_tanstack.md

@@ -19,9 +19,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 7.4.0
+    date: 2025-12-11
+    changes: validatePrefix 도입 및 14단계 추가: 현지화된 라우트로 404 페이지 처리.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: 13단계 추가: 서버 액션에서 locale 가져오기 (선택 사항)
   - version: 5.8.1
     date: 2025-09-09
     changes: Tanstack Start용 추가
@@ -599,7 +602,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### 14단계: TypeScript 구성 (선택 사항)
+### 14단계: 찾을 수 없는 페이지 관리 (선택 사항)
+
+사용자가 존재하지 않는 페이지를 방문할 때 사용자 정의 찾을 수 없음 페이지를 표시할 수 있으며, 로케일 접두사는 찾을 수 없음 페이지가 트리거되는 방식에 영향을 줄 수 있습니다.
+
+#### 로케일 접두사로 TanStack Router의 404 처리 이해하기
+
+TanStack Router에서 현지화된 경로로 404 페이지를 처리하려면 다층 접근 방식이 필요합니다:
+
+1. **전용 404 경로**: 404 UI를 표시하는 특정 경로
+2. **경로 수준 검증**: 로케일 접두사를 검증하고 잘못된 접두사를 404로 리디렉션
+3. **Catch-all 경로**: 로케일 세그먼트 내에서 일치하지 않는 모든 경로를 캡처
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// 이것은 전용 /[locale]/404 경로를 생성합니다
+// 직접 경로로 사용되거나 다른 파일에서 컴포넌트로 가져올 수 있습니다
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// notFoundComponent 및 catch-all 경로에서 재사용할 수 있도록 별도로 내보냅니다
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// 루트 경로는 최상위 레이아웃 역할을 합니다
+// 404를 직접 처리하지 않습니다 - 이것은 자식 경로에 위임됩니다
+// 이것은 루트를 단순하게 유지하고 로케일 인식 경로가 자체 404 로직을 관리할 수 있게 합니다
+export const Route = createRootRoute({
+  component: Outlet,
+});
+```
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { LocaleSwitcher } from "@/components/locale-switcher";
+import { NotFoundComponent } from "./404";
+
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad는 경로가 렌더링되기 전에 실행됩니다 (서버와 클라이언트 모두에서)
+  // 로케일 접두사를 검증하기에 이상적인 장소입니다
+  beforeLoad: ({ params }) => {
+    // 경로 매개변수에서 로케일 가져오기 (서버 헤더에서 가져오지 않음, beforeLoad는 클라이언트와 서버 모두에서 실행되기 때문)
+    const localeParam = params.locale;
+
+    // validatePrefix는 로케일이 intlayer 구성에 따라 유효한지 확인합니다
+    // 반환: { isValid: boolean, localePrefix: string }
+    // - isValid: 접두사가 구성된 로케일과 일치하면 true (또는 접두사가 선택 사항일 때 비어 있음)
+    // - localePrefix: 검증된 접두사 또는 리디렉션을 위한 기본 로케일 접두사
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // 로케일이 유효합니다. 경로가 정상적으로 렌더링되도록 허용합니다
+      return;
+    }
+
+    // 잘못된 로케일 접두사 (예: "xyz"가 유효한 로케일이 아닌 /xyz/about)
+    // 유효한 로케일 접두사가 있는 404 페이지로 리디렉션
+    // 이것은 404 페이지가 여전히 제대로 현지화되도록 보장합니다
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent는 자식 경로가 존재하지 않을 때 호출됩니다
+  // 예: /en/존재하지-않는-페이지가 /en 레이아웃 내에서 이를 트리거합니다
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // 전체 로케일 세그먼트를 IntlayerProvider로 래핑
+    // 로케일 매개변수가 undefined일 때 defaultLocale로 폴백 (선택적 접두사 모드)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout는 404 컴포넌트를 IntlayerProvider로 래핑합니다
+// 이것은 404 페이지에서 번역이 여전히 작동하도록 보장합니다
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* 사용자가 404에서도 언어를 변경할 수 있도록 LocaleSwitcher 포함 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// $ (splat/catch-all) 경로는 다른 경로와 일치하지 않는 모든 경로와 일치합니다
+// 예: /en/어떤/깊게/중첩된/유효하지-않은/경로
+// 이것은 로케일 내의 일치하지 않는 모든 경로가 404 페이지를 표시하도록 보장합니다
+// 이것이 없으면 일치하지 않는 깊은 경로가 빈 페이지나 오류를 표시할 수 있습니다
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### 15단계: TypeScript 구성 (선택 사항)
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
 

package/docs/pl/intlayer_with_tanstack.md

@@ -19,9 +19,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 7.4.0
+    date: 2025-12-11
+    changes: Wprowadzenie validatePrefix oraz dodanie kroku 14: Obsługa stron 404 z lokalizowanymi trasami.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Dodany krok 13: Pobieranie lokalizacji w akcjach serwerowych (Opcjonalnie)
   - version: 6.5.2
     date: 2025-10-03
     changes: Aktualizacja dokumentacji
@@ -590,7 +593,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Krok 14: Konfiguracja TypeScript (opcjonalnie)
+### Krok 14: Zarządzanie stronami nie znalezionymi (opcjonalnie)
+
+Gdy użytkownik odwiedza nieistniejącą stronę, możesz wyświetlić niestandardową stronę "nie znaleziono", a prefiks locale może wpływać na sposób wyzwalania strony "nie znaleziono".
+
+#### Zrozumienie obsługi 404 w TanStack Router z prefiksami locale
+
+W TanStack Router obsługa stron 404 z zlokalizowanymi trasami wymaga podejścia wielowarstwowego:
+
+1. **Dedykowana trasa 404**: Konkretna trasa do wyświetlenia interfejsu 404
+2. **Walidacja na poziomie trasy**: Weryfikuje prefiksy locale i przekierowuje nieprawidłowe do 404
+3. **Trasa catch-all**: Przechwytuje wszystkie niedopasowane ścieżki w segmencie locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// To tworzy dedykowaną trasę /[locale]/404
+// Jest używana zarówno jako bezpośrednia trasa, jak i importowana jako komponent w innych plikach
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Eksportowane osobno, aby można było ponownie użyć w notFoundComponent i trasach catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// Trasa główna służy jako układ najwyższego poziomu
+// Nie obsługuje 404 bezpośrednio - to jest delegowane do tras potomnych
+// To utrzymuje główną trasę prostą i pozwala trasom świadomym locale zarządzać własną logiką 404
+export const Route = createRootRoute({
+  component: Outlet,
+});
+```
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { LocaleSwitcher } from "@/components/locale-switcher";
+import { NotFoundComponent } from "./404";
+
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad uruchamia się przed renderowaniem trasy (zarówno na serwerze, jak i kliencie)
+  // To idealne miejsce do walidacji prefiksu locale
+  beforeLoad: ({ params }) => {
+    // Pobierz locale z parametrów trasy (nie z nagłówków serwera, ponieważ beforeLoad działa zarówno na kliencie, jak i serwerze)
+    const localeParam = params.locale;
+
+    // validatePrefix sprawdza, czy locale jest prawidłowe zgodnie z konfiguracją intlayer
+    // Zwraca: { isValid: boolean, localePrefix: string }
+    // - isValid: true, jeśli prefiks pasuje do skonfigurowanego locale (lub jest pusty, gdy prefiks jest opcjonalny)
+    // - localePrefix: zwalidowany prefiks lub domyślny prefiks locale do przekierowań
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // Locale jest prawidłowe, pozwól trasie renderować się normalnie
+      return;
+    }
+
+    // Nieprawidłowy prefiks locale (np. /xyz/about, gdzie "xyz" nie jest prawidłowym locale)
+    // Przekieruj do strony 404 z prawidłowym prefiksem locale
+    // To zapewnia, że strona 404 jest nadal prawidłowo zlokalizowana
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent jest wywoływane, gdy trasa potomna nie istnieje
+  // np. /en/nieistniejaca-strona wyzwala to w układzie /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Owiń cały segment locale w IntlayerProvider
+    // Powraca do defaultLocale, gdy parametr locale jest undefined (tryb opcjonalnego prefiksu)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout owija komponent 404 w IntlayerProvider
+// To zapewnia, że tłumaczenia nadal działają na stronie 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Dołącz LocaleSwitcher, aby użytkownicy mogli zmieniać język nawet na 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// Trasa $ (splat/catch-all) pasuje do każdej ścieżki, która nie pasuje do innych tras
+// np. /en/jakas/gleboko/zagniezdzona/niewazna/sciezka
+// To zapewnia, że WSZYSTKIE niedopasowane ścieżki w locale wyświetlają stronę 404
+// Bez tego niedopasowane głębokie ścieżki mogą wyświetlać pustą stronę lub błąd
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Krok 15: Konfiguracja TypeScript (opcjonalnie)
 
 Intlayer używa rozszerzenia modułów (module augmentation), aby wykorzystać zalety TypeScript i wzmocnić Twoją bazę kodu.