@intlayer/docs 7.3.15 → 7.4.0

package/docs/es/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: Introduce validatePrefix y añade el paso 14: Cómo gestionar páginas 404 con rutas localizadas.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Añade el paso 13: Obtener la configuración regional en tus server actions (Opcional)
   - version: 5.8.1
     date: 2025-09-09
     changes: Añadido para Tanstack Start
@@ -605,7 +608,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Paso 14: Configurar TypeScript (Opcional)
+### Paso 14: Gestionar páginas no encontradas (Opcional)
+
+Cuando un usuario visita una página que no existe, puedes mostrar una página personalizada de no encontrada y el prefijo de configuración regional puede afectar la forma en que se activa la página de no encontrada.
+
+#### Entender el manejo de 404 de TanStack Router con prefijos de configuración regional
+
+En TanStack Router, manejar páginas 404 con rutas localizadas requiere un enfoque de múltiples capas:
+
+1. **Ruta 404 dedicada**: Una ruta específica para mostrar la UI de 404
+2. **Validación a nivel de ruta**: Valida los prefijos de configuración regional y redirige los inválidos a 404
+3. **Ruta catch-all**: Captura cualquier ruta no coincidente dentro del segmento de configuración regional
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Esto crea una ruta dedicada /[locale]/404
+// Se usa tanto como una ruta directa como importada como componente en otros archivos
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Exportado por separado para que pueda reutilizarse en notFoundComponent y rutas catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// La ruta raíz sirve como el diseño de nivel superior
+// No maneja los 404 directamente - eso se delega a las rutas hijas
+// Esto mantiene la raíz simple y permite que las rutas conscientes de la configuración regional gestionen su propia lógica 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 se ejecuta antes de que la ruta se renderice (tanto en el servidor como en el cliente)
+  // Es el lugar ideal para validar el prefijo de configuración regional
+  beforeLoad: ({ params }) => {
+    // Obtener la configuración regional de los parámetros de la ruta (no de los encabezados del servidor, ya que beforeLoad se ejecuta tanto en el cliente como en el servidor)
+    const localeParam = params.locale;
+
+    // validatePrefix verifica si la configuración regional es válida según tu configuración de intlayer
+    // Retorna: { isValid: boolean, localePrefix: string }
+    // - isValid: true si el prefijo coincide con una configuración regional configurada (o está vacío cuando el prefijo es opcional)
+    // - localePrefix: el prefijo validado o el prefijo de configuración regional predeterminado para redirecciones
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // La configuración regional es válida, permitir que la ruta se renderice normalmente
+      return;
+    }
+
+    // Prefijo de configuración regional inválido (p. ej., /xyz/about donde "xyz" no es una configuración regional válida)
+    // Redirigir a la página 404 con un prefijo de configuración regional válido
+    // Esto asegura que la página 404 siga estando correctamente localizada
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent se llama cuando una ruta hija no existe
+  // p. ej., /en/pagina-inexistente activa esto dentro del diseño /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Envuelve todo el segmento de configuración regional con IntlayerProvider
+    // Vuelve a defaultLocale cuando el parámetro locale es undefined (modo de prefijo opcional)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout envuelve el componente 404 con IntlayerProvider
+// Esto asegura que las traducciones sigan funcionando en la página 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Incluir LocaleSwitcher para que los usuarios puedan cambiar el idioma incluso en 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// La ruta $ (splat/catch-all) coincide con cualquier ruta que no coincida con otras rutas
+// p. ej., /en/algun/ruta/profunda/anidada/invalida
+// Esto asegura que TODAS las rutas no coincidentes dentro de una configuración regional muestren la página 404
+// Sin esto, las rutas profundas no coincidentes podrían mostrar una página en blanco o un error
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Paso 15: Configurar TypeScript (Opcional)
 
 Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer tu base de código.
 

package/docs/fr/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: Ajout de validatePrefix et étape 14 : gestion des pages 404 avec routes localisées.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Ajout de l’étape 13 : récupération de la locale dans vos server actions (optionnel)
   - version: 5.8.1
     date: 2025-09-09
     changes: Ajout pour Tanstack Start
@@ -609,7 +612,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Étape 14 : Configurer TypeScript (Optionnel)
+### Étape 14 : Gérer les pages non trouvées (Optionnel)
+
+Lorsqu'un utilisateur visite une page inexistante, vous pouvez afficher une page personnalisée de non trouvée et le préfixe de locale peut affecter la façon dont la page de non trouvée est déclenchée.
+
+#### Comprendre la gestion des 404 de TanStack Router avec les préfixes de locale
+
+Dans TanStack Router, la gestion des pages 404 avec des routes localisées nécessite une approche multicouche :
+
+1. **Route 404 dédiée** : Une route spécifique pour afficher l'interface utilisateur 404
+2. **Validation au niveau de la route** : Valide les préfixes de locale et redirige ceux qui sont invalides vers 404
+3. **Route catch-all** : Capture tous les chemins non correspondants dans le segment de locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Ceci crée une route dédiée /[locale]/404
+// Elle est utilisée à la fois comme route directe et importée comme composant dans d'autres fichiers
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Exporté séparément pour pouvoir être réutilisé dans notFoundComponent et les routes 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 racine sert de mise en page de niveau supérieur
+// Elle ne gère pas les 404 directement - c'est délégué aux routes enfants
+// Cela garde la racine simple et permet aux routes conscientes de la locale de gérer leur propre logique 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 s'exécute avant que la route ne soit rendue (à la fois sur le serveur et le client)
+  // C'est l'endroit idéal pour valider le préfixe de locale
+  beforeLoad: ({ params }) => {
+    // Obtenir la locale depuis les paramètres de route (pas depuis les en-têtes du serveur, car beforeLoad s'exécute à la fois sur le client et le serveur)
+    const localeParam = params.locale;
+
+    // validatePrefix vérifie si la locale est valide selon votre configuration intlayer
+    // Retourne : { isValid: boolean, localePrefix: string }
+    // - isValid: true si le préfixe correspond à une locale configurée (ou est vide lorsque le préfixe est optionnel)
+    // - localePrefix: le préfixe validé ou le préfixe de locale par défaut pour les redirections
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // La locale est valide, permettre à la route de se rendre normalement
+      return;
+    }
+
+    // Préfixe de locale invalide (p. ex., /xyz/about où "xyz" n'est pas une locale valide)
+    // Rediriger vers la page 404 avec un préfixe de locale valide
+    // Cela garantit que la page 404 est toujours correctement localisée
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent est appelé lorsqu'une route enfant n'existe pas
+  // p. ex., /en/page-inexistante déclenche ceci dans la mise en page /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Envelopper tout le segment de locale avec IntlayerProvider
+    // Revient à defaultLocale lorsque le paramètre locale est undefined (mode préfixe optionnel)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout enveloppe le composant 404 avec IntlayerProvider
+// Cela garantit que les traductions fonctionnent toujours sur la page 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Inclure LocaleSwitcher pour que les utilisateurs puissent changer de langue même sur 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// La route $ (splat/catch-all) correspond à tout chemin qui ne correspond pas à d'autres routes
+// p. ex., /en/quelque/chemin/profond/imbriqué/invalide
+// Cela garantit que TOUS les chemins non correspondants dans une locale affichent la page 404
+// Sans cela, les chemins profonds non correspondants pourraient afficher une page blanche ou une erreur
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Étape 15 : Configurer TypeScript (Optionnel)
 
 Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
 

package/docs/hi/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: 6.5.2
     date: 2025-10-03
     changes: दस्तावेज़ अपडेट
@@ -590,7 +593,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### चरण 14: टाइपस्क्रिप्ट कॉन्फ़िगर करें (वैकल्पिक)
+### चरण 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/about जहां "xyz" एक मान्य लोकेल नहीं है)
+    // मान्य लोकेल उपसर्ग के साथ 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 />
+      {/* LocaleSwitcher शामिल करें ताकि उपयोगकर्ता 404 पर भी भाषा बदल सकें */}
+      <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: टाइपस्क्रिप्ट कॉन्फ़िगर करें (वैकल्पिक)
 
 Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
 

package/docs/id/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: Memperkenalkan validatePrefix dan menambah langkah 14: Menangani halaman 404 dengan rute terlokalisasi.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Menambah langkah 13: Mengambil locale di server actions Anda (Opsional)
   - version: 6.5.2
     date: 2025-10-03
     changes: Memperbarui dokumen
@@ -592,7 +595,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Langkah 14: Konfigurasi TypeScript (Opsional)
+### Langkah 14: Mengelola halaman tidak ditemukan (Opsional)
+
+Ketika pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman tidak ditemukan yang disesuaikan dan awalan locale dapat mempengaruhi cara halaman tidak ditemukan dipicu.
+
+#### Memahami Penanganan 404 TanStack Router dengan Awalan Locale
+
+Di TanStack Router, menangani halaman 404 dengan rute yang dilokalisasi memerlukan pendekatan berlapis:
+
+1. **Rute 404 khusus**: Rute spesifik untuk menampilkan UI 404
+2. **Validasi tingkat rute**: Memvalidasi awalan locale dan mengarahkan ulang yang tidak valid ke 404
+3. **Rute catch-all**: Menangkap semua jalur yang tidak cocok dalam segmen locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Ini membuat rute khusus /[locale]/404
+// Digunakan baik sebagai rute langsung maupun diimpor sebagai komponen di file lain
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Diekspor secara terpisah agar dapat digunakan kembali di notFoundComponent dan rute catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// Rute root berfungsi sebagai tata letak tingkat atas
+// Tidak menangani 404 secara langsung - itu didelegasikan ke rute anak
+// Ini menjaga root tetap sederhana dan memungkinkan rute yang sadar locale mengelola logika 404 mereka sendiri
+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 berjalan sebelum rute dirender (baik di server maupun klien)
+  // Ini adalah tempat ideal untuk memvalidasi awalan locale
+  beforeLoad: ({ params }) => {
+    // Dapatkan locale dari parameter rute (bukan dari header server, karena beforeLoad berjalan di klien dan server)
+    const localeParam = params.locale;
+
+    // validatePrefix memeriksa apakah locale valid menurut konfigurasi intlayer Anda
+    // Mengembalikan: { isValid: boolean, localePrefix: string }
+    // - isValid: true jika awalan cocok dengan locale yang dikonfigurasi (atau kosong ketika awalan opsional)
+    // - localePrefix: awalan yang divalidasi atau awalan locale default untuk pengalihan
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // Locale valid, izinkan rute untuk dirender secara normal
+      return;
+    }
+
+    // Awalan locale tidak valid (misalnya, /xyz/about di mana "xyz" bukan locale yang valid)
+    // Alihkan ke halaman 404 dengan awalan locale yang valid
+    // Ini memastikan halaman 404 masih dilokalkan dengan benar
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent dipanggil ketika rute anak tidak ada
+  // misalnya, /en/halaman-tidak-ada memicu ini dalam tata letak /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Bungkus seluruh segmen locale dengan IntlayerProvider
+    // Kembali ke defaultLocale ketika parameter locale adalah undefined (mode awalan opsional)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout membungkus komponen 404 dengan IntlayerProvider
+// Ini memastikan terjemahan masih berfungsi di halaman 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Sertakan LocaleSwitcher agar pengguna dapat mengubah bahasa bahkan di 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// Rute $ (splat/catch-all) cocok dengan jalur apa pun yang tidak cocok dengan rute lain
+// misalnya, /en/beberapa/jalur/bersarang/mendalam/tidak-valid
+// Ini memastikan SEMUA jalur yang tidak cocok dalam locale menampilkan halaman 404
+// Tanpa ini, jalur dalam yang tidak cocok mungkin menampilkan halaman kosong atau kesalahan
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Langkah 15: Konfigurasi TypeScript (Opsional)
 
 Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.