npm - @intlayer/docs - Versions diffs - 7.5.6 → 7.5.7 - Mend

@intlayer/docs 7.5.6 → 7.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/blog/ar/intlayer_with_i18next.md +4 -4
package/blog/ar/intlayer_with_next-i18next.md +4 -4
package/blog/ar/intlayer_with_next-intl.md +4 -4
package/blog/ar/intlayer_with_react-i18next.md +4 -4
package/blog/ar/intlayer_with_react-intl.md +4 -4
package/blog/ar/intlayer_with_vue-i18n.md +4 -4
package/blog/de/intlayer_with_i18next.md +4 -4
package/blog/de/intlayer_with_next-i18next.md +4 -4
package/blog/de/intlayer_with_next-intl.md +4 -4
package/blog/de/intlayer_with_react-i18next.md +4 -4
package/blog/de/intlayer_with_react-intl.md +4 -4
package/blog/de/intlayer_with_vue-i18n.md +4 -4
package/blog/en/intlayer_with_i18next.md +4 -4
package/blog/en/intlayer_with_next-i18next.md +4 -4
package/blog/en/intlayer_with_next-intl.md +4 -4
package/blog/en/intlayer_with_react-i18next.md +4 -4
package/blog/en/intlayer_with_react-intl.md +4 -4
package/blog/en/intlayer_with_vue-i18n.md +4 -4
package/blog/en-GB/intlayer_with_i18next.md +4 -4
package/blog/en-GB/intlayer_with_next-i18next.md +4 -4
package/blog/en-GB/intlayer_with_next-intl.md +4 -4
package/blog/en-GB/intlayer_with_react-i18next.md +4 -4
package/blog/en-GB/intlayer_with_react-intl.md +4 -4
package/blog/en-GB/intlayer_with_vue-i18n.md +4 -4
package/blog/es/intlayer_with_i18next.md +4 -4
package/blog/es/intlayer_with_next-i18next.md +4 -4
package/blog/es/intlayer_with_next-intl.md +4 -4
package/blog/es/intlayer_with_react-i18next.md +4 -4
package/blog/es/intlayer_with_react-intl.md +4 -4
package/blog/es/intlayer_with_vue-i18n.md +4 -4
package/blog/fr/intlayer_with_i18next.md +4 -4
package/blog/fr/intlayer_with_next-i18next.md +4 -4
package/blog/fr/intlayer_with_next-intl.md +4 -4
package/blog/fr/intlayer_with_react-i18next.md +4 -4
package/blog/fr/intlayer_with_react-intl.md +4 -4
package/blog/fr/intlayer_with_vue-i18n.md +4 -4
package/blog/hi/intlayer_with_i18next.md +4 -4
package/blog/hi/intlayer_with_next-i18next.md +4 -4
package/blog/hi/intlayer_with_next-intl.md +4 -4
package/blog/hi/intlayer_with_react-i18next.md +4 -4
package/blog/hi/intlayer_with_react-intl.md +4 -4
package/blog/hi/intlayer_with_vue-i18n.md +4 -4
package/blog/id/intlayer_with_i18next.md +4 -4
package/blog/id/intlayer_with_next-i18next.md +4 -4
package/blog/id/intlayer_with_next-intl.md +4 -4
package/blog/id/intlayer_with_react-i18next.md +4 -4
package/blog/id/intlayer_with_react-intl.md +4 -4
package/blog/id/intlayer_with_vue-i18n.md +4 -4
package/blog/it/intlayer_with_i18next.md +4 -4
package/blog/it/intlayer_with_next-i18next.md +4 -4
package/blog/it/intlayer_with_next-intl.md +4 -4
package/blog/it/intlayer_with_react-i18next.md +4 -4
package/blog/it/intlayer_with_react-intl.md +4 -4
package/blog/it/intlayer_with_vue-i18n.md +4 -4
package/blog/ja/intlayer_with_i18next.md +4 -4
package/blog/ja/intlayer_with_next-i18next.md +4 -4
package/blog/ja/intlayer_with_next-intl.md +4 -4
package/blog/ja/intlayer_with_react-i18next.md +4 -4
package/blog/ja/intlayer_with_react-intl.md +4 -4
package/blog/ja/intlayer_with_vue-i18n.md +4 -4
package/blog/ko/intlayer_with_i18next.md +4 -4
package/blog/ko/intlayer_with_next-i18next.md +4 -4
package/blog/ko/intlayer_with_next-intl.md +4 -4
package/blog/ko/intlayer_with_react-i18next.md +4 -4
package/blog/ko/intlayer_with_react-intl.md +4 -4
package/blog/ko/intlayer_with_vue-i18n.md +4 -4
package/blog/pl/intlayer_with_i18next.md +4 -4
package/blog/pl/intlayer_with_next-i18next.md +4 -4
package/blog/pl/intlayer_with_next-intl.md +4 -4
package/blog/pl/intlayer_with_react-i18next.md +4 -4
package/blog/pl/intlayer_with_react-intl.md +4 -4
package/blog/pl/intlayer_with_vue-i18n.md +4 -4
package/blog/pt/intlayer_with_i18next.md +4 -4
package/blog/pt/intlayer_with_next-i18next.md +4 -4
package/blog/pt/intlayer_with_next-intl.md +4 -4
package/blog/pt/intlayer_with_react-i18next.md +4 -4
package/blog/pt/intlayer_with_react-intl.md +4 -4
package/blog/pt/intlayer_with_vue-i18n.md +4 -4
package/blog/ru/intlayer_with_i18next.md +4 -4
package/blog/ru/intlayer_with_next-i18next.md +4 -4
package/blog/ru/intlayer_with_next-intl.md +4 -4
package/blog/ru/intlayer_with_react-i18next.md +4 -4
package/blog/ru/intlayer_with_react-intl.md +4 -4
package/blog/ru/intlayer_with_vue-i18n.md +4 -4
package/blog/tr/intlayer_with_i18next.md +4 -4
package/blog/tr/intlayer_with_next-i18next.md +4 -4
package/blog/tr/intlayer_with_next-intl.md +4 -4
package/blog/tr/intlayer_with_react-i18next.md +4 -4
package/blog/tr/intlayer_with_react-intl.md +4 -4
package/blog/tr/intlayer_with_vue-i18n.md +4 -4
package/blog/vi/intlayer_with_i18next.md +4 -4
package/blog/vi/intlayer_with_next-i18next.md +4 -4
package/blog/vi/intlayer_with_next-intl.md +4 -4
package/blog/vi/intlayer_with_react-i18next.md +4 -4
package/blog/vi/intlayer_with_react-intl.md +4 -4
package/blog/vi/intlayer_with_vue-i18n.md +4 -4
package/blog/zh/intlayer_with_i18next.md +4 -4
package/blog/zh/intlayer_with_next-i18next.md +4 -4
package/blog/zh/intlayer_with_next-intl.md +4 -4
package/blog/zh/intlayer_with_react-i18next.md +4 -4
package/blog/zh/intlayer_with_react-intl.md +4 -4
package/blog/zh/intlayer_with_vue-i18n.md +4 -4
package/docs/ar/intlayer_with_next-i18next.md +3 -3
package/docs/ar/intlayer_with_next-intl.md +3 -3
package/docs/ar/intlayer_with_react_router_v7.md +72 -16
package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/de/intlayer_with_next-i18next.md +3 -3
package/docs/de/intlayer_with_next-intl.md +3 -3
package/docs/de/intlayer_with_react_router_v7.md +72 -15
package/docs/de/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/en/configuration.md +1 -0
package/docs/en/intlayer_with_next-i18next.md +3 -3
package/docs/en/intlayer_with_next-intl.md +3 -3
package/docs/en/intlayer_with_react_router_v7.md +74 -15
package/docs/en/intlayer_with_react_router_v7_fs_routes.md +98 -19
package/docs/en-GB/configuration.md +1 -0
package/docs/en-GB/intlayer_with_next-i18next.md +3 -3
package/docs/en-GB/intlayer_with_next-intl.md +3 -3
package/docs/en-GB/intlayer_with_react_router_v7.md +73 -16
package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/es/intlayer_with_next-i18next.md +3 -3
package/docs/es/intlayer_with_next-intl.md +3 -3
package/docs/es/intlayer_with_react_router_v7.md +72 -15
package/docs/es/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/fr/intlayer_with_next-i18next.md +3 -3
package/docs/fr/intlayer_with_next-intl.md +3 -3
package/docs/fr/intlayer_with_react_router_v7.md +72 -15
package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/hi/intlayer_with_next-i18next.md +3 -3
package/docs/hi/intlayer_with_next-intl.md +3 -3
package/docs/hi/intlayer_with_react_router_v7.md +72 -16
package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/id/intlayer_with_next-i18next.md +3 -3
package/docs/id/intlayer_with_next-intl.md +3 -3
package/docs/id/intlayer_with_react_router_v7.md +72 -15
package/docs/id/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/it/intlayer_with_next-i18next.md +3 -3
package/docs/it/intlayer_with_next-intl.md +3 -3
package/docs/it/intlayer_with_react_router_v7.md +72 -15
package/docs/it/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/ja/intlayer_with_next-i18next.md +3 -3
package/docs/ja/intlayer_with_next-intl.md +3 -3
package/docs/ja/intlayer_with_react_router_v7.md +72 -15
package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/ko/intlayer_with_next-i18next.md +3 -3
package/docs/ko/intlayer_with_next-intl.md +3 -3
package/docs/ko/intlayer_with_react_router_v7.md +72 -15
package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/pl/intlayer_with_next-i18next.md +3 -3
package/docs/pl/intlayer_with_next-intl.md +3 -3
package/docs/pl/intlayer_with_react_router_v7.md +45 -13
package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +94 -18
package/docs/pt/intlayer_with_next-i18next.md +3 -3
package/docs/pt/intlayer_with_next-intl.md +3 -3
package/docs/pt/intlayer_with_react_router_v7.md +79 -46
package/docs/pt/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/ru/intlayer_with_next-i18next.md +3 -3
package/docs/ru/intlayer_with_next-intl.md +3 -3
package/docs/ru/intlayer_with_react_router_v7.md +72 -15
package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/tr/intlayer_with_next-i18next.md +3 -3
package/docs/tr/intlayer_with_next-intl.md +3 -3
package/docs/tr/intlayer_with_react_router_v7.md +72 -15
package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +95 -19
package/docs/vi/intlayer_with_next-i18next.md +3 -3
package/docs/vi/intlayer_with_next-intl.md +3 -3
package/docs/vi/intlayer_with_react_router_v7.md +72 -15
package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/docs/zh/intlayer_with_next-i18next.md +3 -3
package/docs/zh/intlayer_with_next-intl.md +3 -3
package/docs/zh/intlayer_with_react_router_v7.md +72 -15
package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +2 -0
package/package.json +6 -6

package/docs/en/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2025-12-07
+updatedAt: 2025-12-27
 title: How to translate your React Router v7 (File-System Routes) app – i18n guide 2025
 description: Learn how to add internationalization (i18n) to your React Router v7 application using Intlayer with file-system based routing. Follow this comprehensive guide to make your app multilingual with locale-aware routing.
 keywords:
@@ -22,6 +22,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 7.5.6
+    date: 2025-12-27
+    changes: Update Layout and handle 404
   - version: 7.3.4
     date: 2025-12-08
     changes: Init history
@@ -31,6 +34,8 @@ history:
 This guide demonstrates how to integrate **Intlayer** for seamless internationalization in React Router v7 projects using **file-system based routing** (`@react-router/fs-routes`) with locale-aware routing, TypeScript support, and modern development practices.
+For client-side routing, refer to the [Intlayer with React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_router_v7.md) guide.
 ## Table of Contents
 <TOC/>
@@ -195,12 +200,13 @@ Create the following files in your `app/routes/` directory:
 #### File Structure
 ```bash
-app/routes/
-├── ($locale)._layout.tsx        # Layout wrapper for locale routes
-├── ($locale)._index.tsx         # Home page (/:locale?)
-├── ($locale)._index.content.ts  # Home page content
-├── ($locale).about.tsx          # About page (/:locale?/about)
-└── ($locale).about.content.ts   # About page content
+app/
+├── root.tsx                         # Layout wrapper for locale routes
+└──routes/
+    ├── ($locale)._index.tsx         # Home page (/, /es, etc.)
+    ├── ($locale)._index.content.ts  # Home page content
+    ├── ($locale).about.tsx          # About page (/about, /es/about, etc.)
+    └── ($locale).about.content.ts   # About page content
 ```
 The naming conventions:
@@ -212,23 +218,50 @@ The naming conventions:
 #### Layout Component
-```tsx fileName="app/routes/($locale)._layout.tsx"
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
-import { Outlet } from "react-router";
+import {
+  isRouteErrorResponse,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
-import { useI18nHTMLAttributes } from "~/hooks/useI18nHTMLAttributes";
+import type { Route } from "./+types/root";
-import type { Route } from "./+types/($locale)._layout";
+import "./app.css";
-export default function RootLayout({ params }: Route.ComponentProps) {
-  useI18nHTMLAttributes();
+// ... Unchanged App, links and ErrorBoundary code
-  const { locale } = params;
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+  return { locale };
+}
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
   return (
-    <IntlayerProvider locale={locale}>
-      <Outlet />
-    </IntlayerProvider>
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
 ```
@@ -236,11 +269,34 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 #### Index Page
 ```tsx fileName="app/routes/($locale)._index.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+import { data } from "react-router";
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
 import type { Route } from "./+types/($locale)._index";
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+  const { isValid } = validatePrefix(locale);
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
 export default function Page() {
   const { title, description, aboutLink } = useIntlayer("page");
@@ -259,11 +315,34 @@ export default function Page() {
 #### About Page
 ```tsx fileName="app/routes/($locale).about.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+import { data } from "react-router";
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
 import type { Route } from "./+types/($locale).about";
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+  const { isValid } = validatePrefix(locale);
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("about", params.locale);
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
 export default function AboutPage() {
   const { title, content, homeLink } = useIntlayer("about");

package/docs/en-GB/configuration.md CHANGED Viewed

@@ -482,6 +482,7 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
 - **DeepSeek**
 - **Google Gemini**
 - **Meta Llama**
+- **ollama**
 #### Properties

package/docs/en-GB/intlayer_with_next-i18next.md CHANGED Viewed

@@ -552,15 +552,15 @@ Intlayer helps you keep JSON translations in sync, test for missing keys, and fi
 Install the intlayer dependencies:
 ```bash packageManager="npm"
-npm install intlayer @intlayer/sync-json-plugin  -D
+npm install intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="pnpm"
-pnpm add intlayer @intlayer/sync-json-plugin  -D
+pnpm add intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="yarn"
-yarn add intlayer @intlayer/sync-json-plugin  -D
+yarn add intlayer @intlayer/sync-json-plugin --dev
 ```
 ```ts fileName="intlayer.config.ts"

package/docs/en-GB/intlayer_with_next-intl.md CHANGED Viewed

@@ -391,15 +391,15 @@ export const config = {
 Install the intlayer dependencies:
 ```bash packageManager="npm"
-npm install intlayer @intlayer/sync-json-plugin  -D
+npm install intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="yarn"
-yarn add intlayer @intlayer/sync-json-plugin  -D
+yarn add intlayer @intlayer/sync-json-plugin --dev
 ```
 ```bash packageManager="pnpm"
-pnpm add intlayer @intlayer/sync-json-plugin  -D
+pnpm add intlayer @intlayer/sync-json-plugin --save-dev
 ```
 Create the intlayer configuration file:

package/docs/en-GB/intlayer_with_react_router_v7.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-10-03
+updatedAt: 2025-12-27
 title: How to translate your React Router v7 app – i18n guide 2025
 description: Learn how to add internationalisation (i18n) to your React Router v7 application using Intlayer. Follow this comprehensive guide to make your app multilingual with locale-aware routing.
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-template
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 7.5.6
+    date: 2025-12-27
+    changes: Update Layout and handle 404
   - version: 6.1.5
     date: 2025-10-03
     changes: Updated doc
@@ -171,10 +174,8 @@ Set up your routing configuration with locale-aware routes:
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // Localised home page
-    route("/:lang?/about", "routes/about/page.tsx"), // Localised about page
-  ]),
+  route("/:lang?", "routes/page.tsx"), // Localised home page
+  route("/:lang?/about", "routes/about/page.tsx"), // Localised about page
 ] satisfies RouteConfig;
 ```
@@ -184,19 +185,50 @@ Set up your root layout and locale-specific layouts:
 #### Root Layout
-```tsx fileName="app/routes/layout.tsx"
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
-import { Outlet } from "react-router";
+import {
+  data,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
+import type { Route } from "./+types/root";
-import type { Route } from "./+types/layout";
+// ... Unchanged App, links and ErrorBoundary code
-export default function RootLayout({ params }: Route.ComponentProps) {
-  const { locale } = params;
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+  if (!locale) {
+    throw data("Language not supported", { status: 404 });
+  }
+  return { locale };
+}
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
   return (
-    <IntlayerProvider locale={locale}>
-      <Outlet />
-    </IntlayerProvider>
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
 ```
@@ -308,9 +340,34 @@ Access your content dictionaries throughout your application:
 #### Localised Home Page
-```tsx fileName="app/routes/[lang]/page.tsx"
-import { useIntlayer } from "intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+```tsx fileName="app/routes/page.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
+import { useIntlayer } from "react-intlayer";
+import { data } from "react-router";
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
+import type { Route } from "./+types/page";
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+  const { isValid } = validatePrefix(locale);
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
 export default function Page() {
   const { title, description, aboutLink } = useIntlayer("page");

package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -32,6 +32,8 @@ history:
 This guide demonstrates how to integrate **Intlayer** for seamless internationalisation in React Router v7 projects with locale-aware routing, TypeScript support, and modern development practices.
+For client-side routing, refer to the [Intlayer with React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react_router_v7.md) guide.
 ## Table of Contents
 <TOC/>

package/docs/es/intlayer_with_next-i18next.md CHANGED Viewed

@@ -553,15 +553,15 @@ Intlayer te ayuda a mantener las traducciones JSON sincronizadas, probar las cla
 Instala las dependencias de intlayer:
 ```bash packageManager="npm"
-npm install intlayer @intlayer/sync-json-plugin  -D
+npm install intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="pnpm"
-pnpm add intlayer @intlayer/sync-json-plugin  -D
+pnpm add intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="yarn"
-yarn add intlayer @intlayer/sync-json-plugin  -D
+yarn add intlayer @intlayer/sync-json-plugin --dev
 ```
 ```ts fileName="intlayer.config.ts"

package/docs/es/intlayer_with_next-intl.md CHANGED Viewed

@@ -391,15 +391,15 @@ export const config = {
 Instala las dependencias de intlayer:
 ```bash packageManager="npm"
-npm install intlayer @intlayer/sync-json-plugin  -D
+npm install intlayer @intlayer/sync-json-plugin --save-dev
 ```
 ```bash packageManager="yarn"
-yarn add intlayer @intlayer/sync-json-plugin  -D
+yarn add intlayer @intlayer/sync-json-plugin --dev
 ```
 ```bash packageManager="pnpm"
-pnpm add intlayer @intlayer/sync-json-plugin  -D
+pnpm add intlayer @intlayer/sync-json-plugin --save-dev
 ```
 Crea el archivo de configuración de intlayer:

package/docs/es/intlayer_with_react_router_v7.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-10-03
+updatedAt: 2025-12-27
 title: Cómo traducir tu React Router v7 – guía i18n 2025
 description: Aprende cómo agregar internacionalización (i18n) a tu aplicación React Router v7 usando Intlayer. Sigue esta guía completa para hacer tu aplicación multilingüe con enrutamiento consciente del locale.
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-template
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 7.5.6
+    date: 2025-12-27
+    changes: Actualizar Layout y manejar 404
   - version: 6.1.5
     date: 2025-10-03
     changes: Documento actualizado
@@ -174,10 +177,8 @@ Configura tu enrutamiento con rutas conscientes del locale:
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // Página de inicio localizada
-    route("/:lang?/about", "routes/about/page.tsx"), // Página "acerca de" localizada
-  ]),
+  route("/:lang?", "routes/page.tsx"), // Página de inicio localizada
+  route("/:lang?/about", "routes/about/page.tsx"), // Página "acerca de" localizada
 ] satisfies RouteConfig;
 ```
@@ -187,19 +188,50 @@ Configura tu layout raíz y los layouts específicos por localización:
 #### Layout Raíz
-```tsx fileName="app/routes/layout.tsx"
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
-import { Outlet } from "react-router";
+import {
+  data,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
+import type { Route } from "./+types/root";
-import type { Route } from "./+types/layout";
+// ... Unchanged App, links and ErrorBoundary code
-export default function RootLayout({ params }: Route.ComponentProps) {
-  const { locale } = params;
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+  if (!locale) {
+    throw data("Language not supported", { status: 404 });
+  }
+  return { locale };
+}
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
   return (
-    <IntlayerProvider locale={locale}>
-      <Outlet />
-    </IntlayerProvider>
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
 ```
@@ -313,9 +345,34 @@ Accede a tus diccionarios de contenido a lo largo de toda tu aplicación:
 #### Página de inicio localizada
-```tsx fileName="app/routes/[lang]/page.tsx"
+```tsx fileName="app/routes/page.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+import { data } from "react-router";
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
+import type { Route } from "./+types/page";
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+  const { isValid } = validatePrefix(locale);
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
 export default function Page() {
   const { title, description, aboutLink } = useIntlayer("page");