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/ja/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: React Router v7アプリを翻訳する方法 – i18nガイド 2025
 description: Intlayerを使用してReact Router v7アプリケーションに国際化（i18n）を追加する方法を学びます。ロケール対応ルーティングでアプリを多言語化するための包括的なガイドに従ってください。
 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: レイアウトの更新と404の処理
   - version: 6.1.5
     date: 2025-10-03
     changes: ドキュメント更新
@@ -172,10 +175,8 @@ export default defineConfig({
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // ローカライズされたホームページ
-    route("/:lang?/about", "routes/about/page.tsx"), // ローカライズされたアバウトページ
-  ]),
+  route("/:lang?", "routes/page.tsx"), // ローカライズされたホームページ
+  route("/:lang?/about", "routes/about/page.tsx"), // ローカライズされたアバウトページ
 ] satisfies RouteConfig;
 ```
@@ -185,19 +186,50 @@ export default [
 #### ルートレイアウト
-```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>
   );
 }
 ```
@@ -312,9 +344,34 @@ export const useLocalizedNavigate = () => {
 #### ローカライズされたホームページ
-```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");

package/docs/ja/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -31,6 +31,8 @@ history:
 このガイドでは、React Router v7プロジェクトにおいて、**ファイルシステムベースのルーティング**（`@react-router/fs-routes`）を使用して、ロケール対応ルーティング、TypeScriptサポート、最新の開発手法を活用しながら、**Intlayer**を使ったシームレスな国際化の統合方法を説明します。
+クライアントサイドルーティングについては、[IntlayerとReact Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_react_router_v7.md)ガイドを参照してください。
 ## Table of Contents
 <TOC/>
@@ -196,12 +198,13 @@ export default routes;
 #### ファイル構造
 ```bash
-app/routes/
-├── ($locale)._layout.tsx        # ロケールルートのレイアウトラッパー
-├── ($locale)._index.tsx         # ホームページ (/:locale?)
-├── ($locale)._index.content.ts  # ホームページのコンテンツ
-├── ($locale).about.tsx          # アバウトページ (/:locale?/about)
-└── ($locale).about.content.ts   # アバウトページのコンテンツ
+app/
+├── root.tsx                         # ロケールルートのレイアウトラッパー
+└──routes/
+    ├── ($locale)._index.tsx         # ホームページ (/, /es, など)
+    ├── ($locale)._index.content.ts  # ホームページのコンテンツ
+    ├── ($locale).about.tsx          # アバウトページ (/about, /es/about, など)
+    └── ($locale).about.content.ts   # アバウトページのコンテンツ
 ```
 命名規則：
@@ -213,23 +216,50 @@ app/routes/
 #### レイアウトコンポーネント
-```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>
   );
 }
 ```
@@ -237,11 +267,34 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 #### インデックスページ
 ```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");
@@ -260,11 +313,34 @@ export default function 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");
@@ -486,7 +562,7 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
-このフックは、ステップ5で示したレイアウトコンポーネント（`($locale)._layout.tsx`）で既に使用されています。
+このフックは、ステップ5で示したレイアウトコンポーネント（`root.tsx`）で既に使用されています。
 ### ステップ10: ミドルウェアを追加する（オプション）

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

@@ -552,15 +552,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/ko/intlayer_with_next-intl.md CHANGED Viewed

@@ -391,15 +391,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 구성 파일을 생성하세요:

package/docs/ko/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: React Router v7 앱 번역하는 방법 – i18n 가이드 2025
 description: Intlayer를 사용하여 React Router v7 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 로케일 인식 라우팅으로 앱을 다국어로 만드는 종합 가이드를 따르세요.
 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: 레이아웃 업데이트 및 404 처리
   - version: 6.1.5
     date: 2025-10-03
     changes: 문서 업데이트
@@ -172,10 +175,8 @@ export default defineConfig({
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // 지역화된 홈 페이지
-    route("/:lang?/about", "routes/about/page.tsx"), // 지역화된 소개 페이지
-  ]),
+  route("/:lang?", "routes/page.tsx"), // 지역화된 홈 페이지
+  route("/:lang?/about", "routes/about/page.tsx"), // 지역화된 소개 페이지
 ] satisfies RouteConfig;
 ```
@@ -185,19 +186,50 @@ export default [
 #### 루트 레이아웃
-```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>
   );
 }
 ```
@@ -310,9 +342,34 @@ export const useLocalizedNavigate = () => {
 #### 현지화된 홈 페이지
-```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");

package/docs/ko/intlayer_with_react_router_v7_fs_routes.md CHANGED Viewed

@@ -32,6 +32,8 @@ history:
 이 가이드는 React Router v7 프로젝트에서 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 활용하여 **Intlayer**를 통합해 원활한 국제화(i18n)를 구현하는 방법을 보여줍니다.
+클라이언트 사이드 라우팅의 경우 [Intlayer와 React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react_router_v7.md) 가이드를 참조하세요.
 ## Table of Contents
 <TOC/>

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

@@ -553,15 +553,15 @@ Intlayer pomaga utrzymać synchronizację tłumaczeń JSON, testować brakujące
 Zainstaluj zależności 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/pl/intlayer_with_next-intl.md CHANGED Viewed

@@ -391,15 +391,15 @@ export const config = {
 Zainstaluj zależności 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
 ```
 Utwórz plik konfiguracyjny intlayer:

package/docs/pl/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: Jak przetłumaczyć aplikację React Router v7 – przewodnik i18n 2025
 description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji React Router v7 za pomocą Intlayer. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby uczynić swoją aplikację wielojęzyczną z routingiem uwzględniającym lokalizację.
 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: Zaktualizuj Layout i obsłuż 404
   - version: 6.1.5
     date: 2025-10-03
     changes: Zaktualizowano dokumentację
@@ -183,10 +186,8 @@ Skonfiguruj routing z trasami uwzględniającymi lokalizację:
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // Lokalizowana strona główna
-    route("/:lang?/about", "routes/about/page.tsx"), // Lokalizowana strona o nas
-  ]),
+  route("/:lang?", "routes/page.tsx"), // Lokalizowana strona główna
+  route("/:lang?/about", "routes/about/page.tsx"), // Lokalizowana strona o nas
 ] satisfies RouteConfig;
 ```
@@ -196,19 +197,50 @@ Skonfiguruj swój główny layout oraz layouty specyficzne dla lokalizacji:
 #### Główny 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";
+// ... Unchanged App, links and ErrorBoundary code
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
-import type { Route } from "./+types/layout";
+  if (!locale) {
+    throw data("Language not supported", { status: 404 });
+  }
+  return { locale };
+}
-export default function RootLayout({ params }: Route.ComponentProps) {
-  const { locale } = params;
+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>
   );
 }
 ```