@intlayer/docs 7.3.15 → 7.4.0

package/docs/pt/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: Introduz validatePrefix e adiciona o passo 14: Tratamento de páginas 404 com rotas localizadas.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Adiciona o passo 13: Recuperar o locale em suas server actions (Opcional)
   - version: 5.8.1
     date: 2025-09-09
     changes: Adicionado para Tanstack Start
@@ -612,7 +615,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passo 14: Configurar o TypeScript (Opcional)
+### Passo 14: Gerenciar páginas não encontradas (Opcional)
+
+Quando um usuário visita uma página inexistente, você pode exibir uma página personalizada de não encontrada e o prefixo de locale pode afetar a forma como a página de não encontrada é acionada.
+
+#### Entendendo o tratamento de 404 do TanStack Router com prefixos de locale
+
+No TanStack Router, lidar com páginas 404 com rotas localizadas requer uma abordagem multicamadas:
+
+1. **Rota 404 dedicada**: Uma rota específica para exibir a interface 404
+2. **Validação no nível da rota**: Valida os prefixos de locale e redireciona os inválidos para 404
+3. **Rota catch-all**: Captura todos os caminhos não correspondentes dentro do segmento de locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Isso cria uma rota dedicada /[locale]/404
+// É usada tanto como uma rota direta quanto importada como um componente em outros arquivos
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Exportado separadamente para que possa ser reutilizado em notFoundComponent e rotas catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// A rota raiz serve como o layout de nível superior
+// Ela não trata 404s diretamente - isso é delegado às rotas filhas
+// Isso mantém a raiz simples e permite que rotas conscientes de locale gerenciem sua própria 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 executa antes da rota ser renderizada (tanto no servidor quanto no cliente)
+  // É o lugar ideal para validar o prefixo de locale
+  beforeLoad: ({ params }) => {
+    // Obter locale dos parâmetros da rota (não dos cabeçalhos do servidor, pois beforeLoad executa tanto no cliente quanto no servidor)
+    const localeParam = params.locale;
+
+    // validatePrefix verifica se o locale é válido de acordo com sua configuração intlayer
+    // Retorna: { isValid: boolean, localePrefix: string }
+    // - isValid: true se o prefixo corresponder a um locale configurado (ou estiver vazio quando o prefixo for opcional)
+    // - localePrefix: o prefixo validado ou o prefixo de locale padrão para redirecionamentos
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // Locale é válido, permitir que a rota seja renderizada normalmente
+      return;
+    }
+
+    // Prefixo de locale inválido (por exemplo, /xyz/about onde "xyz" não é um locale válido)
+    // Redirecionar para a página 404 com um prefixo de locale válido
+    // Isso garante que a página 404 ainda esteja adequadamente localizada
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent é chamado quando uma rota filha não existe
+  // por exemplo, /en/pagina-inexistente dispara isso dentro do layout /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Envolver todo o segmento de locale com IntlayerProvider
+    // Volta para defaultLocale quando o parâmetro locale é undefined (modo de prefixo opcional)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout envolve o componente 404 com IntlayerProvider
+// Isso garante que as traduções ainda funcionem na página 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Incluir LocaleSwitcher para que os usuários possam alterar o idioma mesmo em 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// A rota $ (splat/catch-all) corresponde a qualquer caminho que não corresponda a outras rotas
+// por exemplo, /en/algum/caminho/profundamente/aninhado/invalido
+// Isso garante que TODOS os caminhos não correspondentes dentro de um locale mostrem a página 404
+// Sem isso, caminhos profundos não correspondentes podem mostrar uma página em branco ou erro
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Passo 15: Configurar o TypeScript (Opcional)
 
 O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e fortalecer sua base de código.
 

package/docs/ru/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: Получение текущей локали в ваших server actions (опционально)
   - version: 5.8.1
     date: 2025-09-09
     changes: Добавлено для Tanstack Start
@@ -602,7 +605,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Шаг 14: Настройка TypeScript (необязательно)
+### Шаг 14: Управление страницами "не найдено" (необязательно)
+
+Когда пользователь посещает несуществующую страницу, вы можете отобразить пользовательскую страницу "не найдено", и префикс локали может повлиять на способ срабатывания страницы "не найдено".
+
+#### Понимание обработки 404 в TanStack Router с префиксами локали
+
+В TanStack Router обработка страниц 404 с локализованными маршрутами требует многоуровневого подхода:
+
+1. **Выделенный маршрут 404**: Специфический маршрут для отображения интерфейса 404
+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/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
+    // Возвращается к defaultLocale, когда параметр locale равен undefined (режим опционального префикса)
+    <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: Настройка TypeScript (необязательно)
 
 Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать вашу кодовую базу более надежной.
 

package/docs/tr/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'i tanıt ve 14. adımı ekle: Yerelleştirilmiş rotalarla 404 sayfalarını ele alma.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: 13. adımı ekle: Sunucu işlemlerinde locale bilgisini almak (Opsiyonel)
   - version: 6.5.2
     date: 2025-10-03
     changes: Doküman güncellemesi
@@ -604,7 +607,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Adım 14: TypeScript Yapılandırması (İsteğe Bağlı)
+### Adım 14: Bulunamayan sayfaları yönetme (İsteğe Bağlı)
+
+Bir kullanıcı var olmayan bir sayfayı ziyaret ettiğinde, özel bir bulunamadı sayfası gösterebilirsiniz ve yerel ayar öneki, bulunamadı sayfasının tetiklenme şeklini etkileyebilir.
+
+#### TanStack Router'ın Yerel Ayar Önekleriyle 404 İşlemesini Anlama
+
+TanStack Router'da yerelleştirilmiş rotalarla 404 sayfalarını işlemek, çok katmanlı bir yaklaşım gerektirir:
+
+1. **Özel 404 rotası**: 404 kullanıcı arayüzünü göstermek için özel bir rota
+2. **Rota düzeyinde doğrulama**: Yerel ayar öneklerini doğrular ve geçersiz olanları 404'e yönlendirir
+3. **Catch-all rotası**: Yerel ayar segmenti içindeki eşleşmeyen tüm yolları yakalar
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Bu, özel bir /[locale]/404 rotası oluşturur
+// Hem doğrudan bir rota olarak kullanılır hem de diğer dosyalarda bir bileşen olarak içe aktarılır
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// notFoundComponent ve catch-all rotalarında yeniden kullanılabilmesi için ayrı olarak dışa aktarılır
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// Kök rota, en üst düzey düzen olarak hizmet eder
+// 404'leri doğrudan işlemez - bu, alt rotalara devredilir
+// Bu, kökü basit tutar ve yerel ayar farkında rotaların kendi 404 mantığını yönetmesine izin verir
+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, rota render edilmeden önce çalışır (hem sunucuda hem de istemcide)
+  // Yerel ayar önekini doğrulamak için ideal yerdir
+  beforeLoad: ({ params }) => {
+    // Yerel ayarı rota parametrelerinden al (sunucu başlıklarından değil, çünkü beforeLoad hem istemcide hem de sunucuda çalışır)
+    const localeParam = params.locale;
+
+    // validatePrefix, yerel ayarın intlayer yapılandırmanıza göre geçerli olup olmadığını kontrol eder
+    // Döndürür: { isValid: boolean, localePrefix: string }
+    // - isValid: önek yapılandırılmış bir yerel ayarla eşleşiyorsa (veya önek isteğe bağlı olduğunda boşsa) true
+    // - localePrefix: doğrulanmış önek veya yönlendirmeler için varsayılan yerel ayar öneki
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // Yerel ayar geçerli, rotanın normal şekilde render edilmesine izin ver
+      return;
+    }
+
+    // Geçersiz yerel ayar öneki (örn. "xyz" geçerli bir yerel ayar olmadığında /xyz/about)
+    // Geçerli bir yerel ayar öneki ile 404 sayfasına yönlendir
+    // Bu, 404 sayfasının hala düzgün şekilde yerelleştirildiğini garanti eder
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent, bir alt rota mevcut olmadığında çağrılır
+  // örn. /en/var-olmayan-sayfa bunu /en düzeni içinde tetikler
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Tüm yerel ayar segmentini IntlayerProvider ile sar
+    // Yerel ayar parametresi undefined olduğunda defaultLocale'e geri döner (isteğe bağlı önek modu)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout, 404 bileşenini IntlayerProvider ile sarar
+// Bu, çevirilerin 404 sayfasında hala çalışmasını sağlar
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Kullanıcıların 404'te bile dil değiştirebilmesi için LocaleSwitcher'ı dahil et */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// $ (splat/catch-all) rotası, diğer rotalarla eşleşmeyen herhangi bir yolu eşleştirir
+// örn. /en/bazı/derin/iç içe/geçersiz/yol
+// Bu, bir yerel ayar içindeki TÜM eşleşmeyen yolların 404 sayfasını göstermesini sağlar
+// Bu olmadan, eşleşmeyen derin yollar boş bir sayfa veya hata gösterebilir
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Adım 15: TypeScript Yapılandırması (İsteğe Bağlı)
 
 Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.
 

package/docs/vi/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: Giới thiệu validatePrefix và thêm bước 14: Xử lý trang 404 với các tuyến đường được bản địa hóa.
   - version: 7.3.9
     date: 2025-12-05
-    changes: Add step 13: Retrieve the locale in your server actions (Optional)
+    changes: Thêm bước 13: Lấy locale trong server actions của bạn (Tùy chọn)
   - version: 6.5.2
     date: 2025-10-03
     changes: Cập nhật tài liệu
@@ -600,7 +603,134 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Bước 14: Cấu hình TypeScript (Tùy chọn)
+### Bước 14: Quản lý trang không tìm thấy (Tùy chọn)
+
+Khi người dùng truy cập một trang không tồn tại, bạn có thể hiển thị một trang không tìm thấy tùy chỉnh và tiền tố locale có thể ảnh hưởng đến cách trang không tìm thấy được kích hoạt.
+
+#### Hiểu về xử lý 404 của TanStack Router với tiền tố locale
+
+Trong TanStack Router, xử lý các trang 404 với các route đã được bản địa hóa yêu cầu một cách tiếp cận nhiều lớp:
+
+1. **Route 404 chuyên dụng**: Một route cụ thể để hiển thị giao diện 404
+2. **Xác thực cấp route**: Xác thực các tiền tố locale và chuyển hướng các tiền tố không hợp lệ đến 404
+3. **Route catch-all**: Bắt tất cả các đường dẫn không khớp trong phân đoạn locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// Điều này tạo một tuyến đường /[locale]/404 chuyên dụng
+// Nó được sử dụng cả như một tuyến đường trực tiếp và được nhập như một thành phần trong các tệp khác
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
+
+// Xuất riêng để có thể tái sử dụng trong notFoundComponent và các tuyến catch-all
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
+```
+
+```tsx fileName="src/routes/__root.tsx"
+import { createRootRoute } from "@tanstack/react-router";
+
+// Tuyến đường gốc phục vụ như bố cục cấp cao nhất
+// Nó không xử lý 404 trực tiếp - điều đó được ủy quyền cho các tuyến đường con
+// Điều này giữ cho gốc đơn giản và cho phép các tuyến đường nhận biết locale quản lý logic 404 của riêng chúng
+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 chạy trước khi tuyến đường được kết xuất (trên cả máy chủ và máy khách)
+  // Đây là nơi lý tưởng để xác thực tiền tố locale
+  beforeLoad: ({ params }) => {
+    // Lấy locale từ tham số tuyến đường (không phải từ tiêu đề máy chủ, vì beforeLoad chạy trên cả máy khách và máy chủ)
+    const localeParam = params.locale;
+
+    // validatePrefix kiểm tra xem locale có hợp lệ theo cấu hình intlayer của bạn không
+    // Trả về: { isValid: boolean, localePrefix: string }
+    // - isValid: true nếu tiền tố khớp với locale đã cấu hình (hoặc trống khi tiền tố là tùy chọn)
+    // - localePrefix: tiền tố đã được xác thực hoặc tiền tố locale mặc định để chuyển hướng
+    const { isValid, localePrefix } = validatePrefix(localeParam);
+
+    if (isValid) {
+      // Locale hợp lệ, cho phép tuyến đường kết xuất bình thường
+      return;
+    }
+
+    // Tiền tố locale không hợp lệ (ví dụ: /xyz/about trong đó "xyz" không phải là locale hợp lệ)
+    // Chuyển hướng đến trang 404 với tiền tố locale hợp lệ
+    // Điều này đảm bảo trang 404 vẫn được bản địa hóa đúng cách
+    throw redirect({
+      to: "/{-$locale}/404",
+      params: { locale: localePrefix },
+    });
+  },
+  component: RouteComponent,
+  // notFoundComponent được gọi khi một tuyến đường con không tồn tại
+  // ví dụ: /en/trang-khong-ton-tai kích hoạt điều này trong bố cục /en
+  notFoundComponent: NotFoundLayout,
+});
+
+function RouteComponent() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    // Bọc toàn bộ phân đoạn locale bằng IntlayerProvider
+    // Quay lại defaultLocale khi tham số locale là undefined (chế độ tiền tố tùy chọn)
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+
+// NotFoundLayout bọc thành phần 404 bằng IntlayerProvider
+// Điều này đảm bảo bản dịch vẫn hoạt động trên trang 404
+function NotFoundLayout() {
+  const { defaultLocale } = useLocale();
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale ?? defaultLocale}>
+      <NotFoundComponent />
+      {/* Bao gồm LocaleSwitcher để người dùng có thể thay đổi ngôn ngữ ngay cả trên 404 */}
+      <LocaleSwitcher />
+    </IntlayerProvider>
+  );
+}
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
+
+// Tuyến đường $ (splat/catch-all) khớp với bất kỳ đường dẫn nào không khớp với các tuyến đường khác
+// ví dụ: /en/mot/duong/dan/sau/long/khong-hop-le
+// Điều này đảm bảo TẤT CẢ các đường dẫn không khớp trong một locale hiển thị trang 404
+// Nếu không có điều này, các đường dẫn sâu không khớp có thể hiển thị trang trống hoặc lỗi
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
+```
+
+---
+
+### Bước 15: Cấu hình TypeScript (Tùy chọn)
 
 Intlayer sử dụng module augmentation để tận dụng các lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.