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

@intlayer/docs 7.5.5 → 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 +8 -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/pl/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -31,6 +31,8 @@ history:
 Ten przewodnik pokazuje, jak zintegrować **Intlayer** dla płynnej internacjonalizacji w projektach React Router v7 używając **routingu opartego na systemie plików** (`@react-router/fs-routes`) z routingiem uwzględniającym lokalizację, wsparciem TypeScript oraz nowoczesnymi praktykami programistycznymi.
+W przypadku routingu po stronie klienta, zapoznaj się z przewodnikiem [Intlayer z React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_react_router_v7.md).
 ## Table of Contents
 <TOC/>
@@ -220,12 +222,13 @@ Utwórz następujące pliki w katalogu `app/routes/`:
 #### Struktura plików
 ```bash
-app/routes/
-├── ($locale)._layout.tsx        # Opakowanie layoutu dla tras lokalizacji
-├── ($locale)._index.tsx         # Strona główna (/:locale?)
-├── ($locale)._index.content.ts  # Zawartość strony głównej
-├── ($locale).about.tsx          # Strona O nas (/:locale?/about)
-└── ($locale).about.content.ts   # Zawartość strony O nas
+app/
+├── root.tsx                         # Opakowanie layoutu dla tras lokalizacji
+└──routes/
+    ├── ($locale)._index.tsx         # Strona główna (/, /es, itd.)
+    ├── ($locale)._index.content.ts  # Zawartość strony głównej
+    ├── ($locale).about.tsx          # Strona O nas (/about, /es/about, itd.)
+    └── ($locale).about.content.ts   # Zawartość strony O nas
 ```
 Konwencje nazewnictwa:
@@ -237,23 +240,50 @@ Konwencje nazewnictwa:
 #### Komponent Layoutu
-```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();
+// 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>
   );
 }
 ```
@@ -261,11 +291,34 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 #### Strona indeksowa
 ```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");
@@ -284,11 +337,34 @@ export default function Page() {
 #### Strona O nas
 ```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/pt/intlayer_with_next-i18next.md CHANGED Viewed

@@ -552,15 +552,15 @@ O Intlayer ajuda você a manter as traduções JSON sincronizadas, testar chaves
 Instale as dependências do 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/pt/intlayer_with_next-intl.md CHANGED Viewed

@@ -391,15 +391,15 @@ export const config = {
 Instale as dependências do 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
 ```
 Crie o arquivo de configuração do intlayer:

package/docs/pt/intlayer_with_react_router_v7.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-09-04
+updatedAt: 2025-12-27
 title: Como traduzir seu React Router v7 – guia i18n 2025
 description: Aprenda como adicionar internacionalização (i18n) à sua aplicação React Router v7 usando Intlayer. Siga este guia completo para tornar seu app multilíngue com roteamento sensível à localidade.
 keywords:
@@ -21,6 +21,9 @@ applicationTemplate: https://github.com/AydinTheFirst/react-router-intlayer
 author: AydinTheFirst
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 7.5.6
+    date: 2025-12-27
+    changes: Atualizar Layout e lidar com 404
   - version: 5.8.2
     date: 2025-09-04
     changes: Adicionado para React Router v7
@@ -160,15 +163,12 @@ module.exports = config;
 Configure sua configuração de rotas com rotas que reconhecem o idioma:
-```typescript fileName="app/routes.ts" codeFormat="typescript"
+```typescript fileName="app/routes.ts"
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/", "routes/page.tsx"), // Página raiz - redireciona para o idioma
-    route("/:lang", "routes/[lang]/page.tsx"), // Página inicial localizada
-    route("/:lang?/about", "routes/[lang]/about/page.tsx"), // Página sobre localizada
-  ]),
+  route("/:lang?", "routes/page.tsx"), // Página inicial localizada
+  route("/:lang?/about", "routes/about/page.tsx"), // Página sobre localizada
 ] satisfies RouteConfig;
 ```
@@ -195,17 +195,50 @@ Configure seu layout raiz e layouts específicos para cada localidade:
 #### Layout Raiz
-```tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
-import { Outlet } from "react-router";
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
+import {
+  data,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
+import type { Route } from "./+types/root";
+// ... Unchanged App, links and ErrorBoundary code
+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 ?? {};
-export default function RootLayout() {
   return (
-    <IntlayerProvider>
-      <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>
   );
 }
 ```
@@ -299,46 +332,46 @@ export default function LocalizedLink({ to, ...props }: RouterLinkProps) {
 Acesse seus dicionários de conteúdo em toda a sua aplicação:
-#### Página de Redirecionamento Raiz
+#### Página Inicial Localizada
-```tsx fileName="app/routes/page.tsx" codeFormat="typescript"
-import { useLocale } from "react-intlayer";
-import { Navigate } from "react-router";
+```tsx fileName="app/routes/page.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
+import { useIntlayer } from "react-intlayer";
+import { data } from "react-router";
-export default function Page() {
-  const { locale } = useLocale();
+import { LocaleSwitcher } from "~/components/locale-switcher";
-  return <Navigate replace to={locale} />;
-}
-```
+import { Navbar } from "~/components/navbar";
+import type { Route } from "./+types/page";
-#### Página Inicial Localizada
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
-```tsx fileName="app/routes/[lang]/page.tsx" codeFormat="typescript"
-import { useIntlayer } from "react-intlayer";
-import LocalizedLink from "~/components/localized-link";
+  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 content = useIntlayer("page");
+  const { title, description, aboutLink } = useIntlayer("page");
   return (
-    <div style={{ padding: "2rem", textAlign: "center" }}>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-      <nav style={{ marginTop: "2rem" }}>
-        <LocalizedLink
-          to="/about"
-          style={{
-            display: "inline-block",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#007bff",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "4px",
-          }}
-        >
-          {content.aboutLink}
-        </LocalizedLink>
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
       </nav>
     </div>
   );

package/docs/pt/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -31,6 +31,8 @@ history:
 Este guia demonstra como integrar o **Intlayer** para internacionalização perfeita em projetos React Router v7 usando **roteamento baseado em sistema de arquivos** (`@react-router/fs-routes`) com roteamento consciente de localidade, suporte a TypeScript e práticas modernas de desenvolvimento.
+Para roteamento do lado do cliente, consulte o guia [Intlayer com React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_react_router_v7.md).
 ## Índice
 <TOC/>
@@ -195,12 +197,13 @@ Crie os seguintes arquivos no seu diretório `app/routes/`:
 #### Estrutura de Arquivos
 ```bash
-app/routes/
-├── ($locale)._layout.tsx        # Wrapper de layout para rotas de locale
-├── ($locale)._index.tsx         # Página inicial (/:locale?)
-├── ($locale)._index.content.ts  # Conteúdo da página inicial
-├── ($locale).about.tsx          # Página About (/:locale?/about)
-└── ($locale).about.content.ts   # Conteúdo da página About
+app/
+├── root.tsx                         # Wrapper de layout para rotas de locale
+└──routes/
+    ├── ($locale)._index.tsx         # Página inicial (/, /es, etc.)
+    ├── ($locale)._index.content.ts  # Conteúdo da página inicial
+    ├── ($locale).about.tsx          # Página About (/about, /es/about, etc.)
+    └── ($locale).about.content.ts   # Conteúdo da página About
 ```
 As convenções de nomenclatura:
@@ -212,23 +215,50 @@ As convenções de nomenclatura:
 #### Componente de Layout
-```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();
+// 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 +266,34 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 #### Página Index
 ```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 +312,34 @@ export default function Page() {
 #### Página About
 ```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");
@@ -482,7 +558,7 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
-Este hook já é usado no componente de layout (`($locale)._layout.tsx`) mostrado no Passo 5.
+Este hook já é usado no componente de layout (`root.tsx`) mostrado no Passo 5.
 ### Passo 10: Adicionar middleware (Opcional)

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

@@ -554,15 +554,15 @@ Intlayer помогает поддерживать JSON-переводы в си
 Установите зависимости 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/ru/intlayer_with_next-intl.md CHANGED Viewed

@@ -393,15 +393,15 @@ export const config = {
 Установите зависимости 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
 ```
 Создайте файл конфигурации intlayer: