@intlayer/docs 9.4.3 → 9.5.0

package/docs/ru/intlayer_with_react_router_v7_fs_routes.md

@@ -1,921 +0,0 @@
----
-createdAt: 2025-12-07
-updatedAt: 2026-08-30
-title: "React Router v7 i18n - Полное руководство по переводу вашего приложения"
-description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения React Router v7. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
-keywords:
-  - Интернационализация
-  - Документация
-  - Intlayer
-  - React Router v7
-  - fs-routes
-  - Маршруты на основе файловой системы
-  - React
-  - i18n
-  - TypeScript
-  - Маршрутизация по локали
-slugs:
-  - doc
-  - environment
-  - vite-and-react
-  - react-router-v7-fs-routes
-applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template
-applicationShowcase: https://intlayer-react-router-v7-fs-routes.vercel.app
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
-history:
-  - version: 8.9.0
-    date: 2026-05-04
-    changes: "Обновление использования API useIntlayer в Solid для прямого доступа к свойствам"
-  - version: 7.5.9
-    date: 2025-12-30
-    changes: "Добавить команду init"
-  - version: 7.3.4
-    date: 2025-12-08
-    changes: "Начальная история"
-author: aymericzip
----
-
-# Переведите ваш React Router v7 (File-System Routes) с Intlayer | Интернационализация (i18n)
-
-Это руководство демонстрирует, как интегрировать **Intlayer** для бесшовной интернационализации в проектах на React Router v7 с использованием **маршрутизации на основе файловой системы** (`@react-router/fs-routes`) с маршрутизацией, учитывающей локаль, поддержкой TypeScript и современными практиками разработки.
-
-Для клиентской маршрутизации обратитесь к руководству [Intlayer с React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_react_router_v7.md).
-
-## Table of Contents
-
-<TOC/>
-
-## Почему Intlayer лучше альтернатив?
-
-По сравнению с основными решениями, такими как «react-i18next» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
-
-<AccordionGroup>
-<Accordion header="Полное покрытие React Router">
-
-Intlayer оптимизирован для идеальной работы с React Router, предлагая **маршрутизацию с учетом локали**, **промежуточное ПО для определения локали** и все функции, необходимые для масштабирования интернационализации (i18n).
-
-</Accordion>
-
-<Accordion header="Размер бандла">
-
-Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
-
-</Accordion>
-
-<Accordion header="Удобство обслуживания">
-
-Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
-
-</Accordion>
-
-<Accordion header="Агент ИИ">
-
-Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как **CLI** для проверки отсутствия переводов,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, и **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/agent_skills.md)**, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
-
-</Accordion>
-
-<Accordion header="Автоматизация">
-
-Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает **компилятор** для автоматизации извлечения контента, а также [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), которая помогает **переводить в фоновом режиме**.
-
-</Accordion>
-
-<Accordion header="Производительность">
-
-Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
-
-</Accordion>
-
-<Accordion header="Масштабирование с помощью не-разработчиками">
-
-Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** и **[полный CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, чтобы помочь вам управлять многоязычным контентом в **реальном времени**, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
-
-</Accordion>
-</AccordionGroup>
-
----
-
-## Пошаговое руководство по настройке Intlayer в приложении React Router v7 с маршрутами на основе файловой системы
-
-<Tabs defaultTab="video">
-  <Tab label="Video" value="video">
-
-<iframe title="How to translate an React Router v7 (File-System Routes) app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-fs-routes-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Демо" value="demo">
-
-<iframe
-  src="https://intlayer-react-router-v7-fs-routes.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Демо - intlayer-react-router-v7-fs-routes-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) on GitHub.
-
-<Steps>
-
-<Step number={1} title="Установка зависимостей">
-
-Установите необходимые пакеты с помощью предпочитаемого менеджера пакетов:
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-npm install @react-router/fs-routes --save-dev
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-pnpm add @react-router/fs-routes --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-bun add @react-router/fs-routes --dev
-bun x intlayer init
-```
-
-- **intlayer**
-
-  Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, [объявления контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md), транспиляции и [CLI-команд](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/index.md).
-
-- **react-intlayer**
-  Пакет, который интегрирует Intlayer с приложением React. Он предоставляет провайдеры контекста и хуки для интернационализации в React.
-
-- **vite-intlayer**
-  Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления куки и обработки перенаправления URL.
-
-- **@react-router/fs-routes**
-  Пакет, который обеспечивает маршрутизацию на основе файловой системы для React Router v7.
-
-</Step>
-
-<Step number={2} title="Конфигурация вашего проекта">
-
-Создайте файл конфигурации для настройки языков вашего приложения:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig, Locales } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    defaultLocale: Locales.ENGLISH, // Язык по умолчанию
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // Поддерживаемые языки
-  },
-};
-
-export default config;
-```
-
-> С помощью этого файла конфигурации вы можете настроить локализованные URL-адреса, перенаправления в middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
-
-</Step>
-
-<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Vite">
-
-Добавьте плагин intlayer в вашу конфигурацию:
-
-```typescript fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [reactRouter(), intlayer()],
-});
-```
-
-> Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.
-
-</Step>
-
-<Step number={4} title="Настройка маршрутов на основе файловой системы React Router v7">
-
-Настройте конфигурацию маршрутов для использования маршрутов на основе файловой системы с `flatRoutes`:
-
-```typescript fileName="app/routes.ts"
-import type { RouteConfig } from "@react-router/dev/routes";
-import { flatRoutes } from "@react-router/fs-routes";
-import { configuration } from "intlayer";
-
-const routes: RouteConfig = flatRoutes({
-  // Игнорировать файлы декларации контента, чтобы они не обрабатывались как маршруты
-  ignoredRouteFiles: configuration.content.fileExtensions.map(
-    (fileExtension) => `**/*${fileExtension}`
-  ),
-});
-
-export default routes;
-```
-
-> Функция `flatRoutes` из `@react-router/fs-routes` включает маршрутизацию на основе файловой системы, где структура файлов в директории `routes/` определяет маршруты вашего приложения. Опция `ignoredRouteFiles` гарантирует, что файлы декларации контента Intlayer (`.content.ts`, и т.д.) не обрабатываются как файлы маршрутов.
-
-</Step>
-
-<Step number={5} title="Создайте файлы маршрутов с соглашениями файловой системы">
-
-При маршрутизации на основе файловой системы вы используете плоское соглашение об именовании, где точки (`.`) представляют сегменты пути, а скобки `()` обозначают необязательные сегменты.
-
-Создайте следующие файлы в директории `app/routes/`:
-
-#### Структура файлов
-
-```bash
-app/
-├── root.tsx                         # Обертка layout для маршрутов локали
-└──routes/
-    ├── ($locale)._index.tsx         # Главная страница (/, /es, и т.д.)
-    ├── ($locale)._index.content.ts  # Контент главной страницы
-    ├── ($locale).about.tsx          # Страница "О нас" (/about, /es/about, и т.д.)
-    └── ($locale).about.content.ts   # Контент страницы "О нас"
-```
-
-Соглашения об именовании:
-
-- `($locale)` - Необязательный динамический сегмент для параметра локали
-- `_layout` - Маршрут layout, который оборачивает дочерние маршруты
-- `_index` - Индексный маршрут (отображается на родительском пути)
-- `.` (точка) - Разделяет сегменты пути (например, `($locale).about` → `/:locale?/about`)
-
-#### Компонент Layout
-
-```tsx fileName="app/root.tsx"
-import { getLocaleFromPath } from "intlayer";
-import { IntlayerProvider } from "react-intlayer";
-import {
-  isRouteErrorResponse,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from "react-router";
-
-import type { Route } from "./+types/root";
-
-import "./app.css";
-
-// links and ErrorBoundary code
-
-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 (
-    <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>
-  );
-}
-```
-
-#### Индексная страница
-
-```tsx fileName="app/routes/($locale)._index.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/($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");
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{description}</p>
-      <nav>
-        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
-      </nav>
-    </div>
-  );
-}
-```
-
-#### Страница "О нас"
-
-```tsx fileName="app/routes/($locale).about.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/($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");
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{content}</p>
-  );
-}
-```
-
-</Step>
-
-<Step number={6} title="Объявите ваш контент">
-
-Создайте и управляйте объявлениями контента для хранения переводов. Разместите файлы контента рядом с файлами маршрутов:
-
-```tsx fileName="app/routes/($locale)._index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const pageContent = {
-  key: "page",
-  content: {
-    title: t({
-      en: "Welcome to React Router v7 + Intlayer",
-      es: "Bienvenido a React Router v7 + Intlayer",
-      fr: "Bienvenue sur React Router v7 + Intlayer",
-    }),
-    description: t({
-      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
-      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
-      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
-    }),
-    aboutLink: t({
-      en: "Learn About Us",
-      es: "Aprender Sobre Nosotros",
-      fr: "En savoir plus sur nous",
-    }),
-  },
-} satisfies Dictionary;
-
-export default pageContent;
-```
-
-```tsx fileName="app/routes/($locale).about.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const aboutContent = {
-  key: "about",
-  content: {
-    title: t({
-      en: "About Us",
-      es: "Sobre Nosotros",
-      fr: "À propos de nous",
-    }),
-    content: t({
-      en: "This is the about page content.",
-      es: "Este es el contenido de la página de información.",
-      fr: "Ceci est le contenu de la page à propos.",
-    }),
-    homeLink: t({
-      en: "Home",
-      es: "Inicio",
-      fr: "Accueil",
-    }),
-  },
-} satisfies Dictionary;
-
-export default aboutContent;
-```
-
-> Ваши объявления контента могут быть определены в любом месте вашего приложения, как только они включены в директорию `contentDir` (по умолчанию, `./app`). И соответствовать расширению файла объявления контента (по умолчанию, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
-
-> Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
-
-> Если ваше приложение уже существует, вы можете использовать [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md), а также [команду extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md), чтобы трансформировать тысячи компонентов за секунду.
-
-</Step>
-
-<Step number={7} title="Создайте компоненты с поддержкой локали">
-
-Создайте компонент `LocalizedLink` для навигации с учётом локали:
-
-```tsx fileName="app/components/localized-link.tsx"
-import type { FC } from "react";
-
-import { getLocalizedUrl, type LocalesValues } from "intlayer";
-import { useLocale } from "react-intlayer";
-import { Link, type LinkProps, type To } from "react-router";
-
-const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
-
-// Проверяет, является ли ссылка внешней
-export const locacalizeTo = (to: To, locale: LocalesValues): To => {
-  if (typeof to === "string") {
-    if (isExternalLink(to)) {
-      return to;
-    }
-
-    return getLocalizedUrl(to, locale);
-  }
-
-  if (isExternalLink(to.pathname ?? "")) {
-    return to;
-  }
-
-  return {
-    ...to,
-    pathname: getLocalizedUrl(to.pathname ?? "", locale),
-  };
-};
-
-// Компонент локализованной ссылки, учитывающий текущую локаль
-export const LocalizedLink: FC<LinkProps> = (props) => {
-  const { locale } = useLocale();
-
-  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
-};
-```
-
-Если вы хотите навигировать по локализованным маршрутам, вы можете использовать хук `useLocalizedNavigate`:
-
-```tsx fileName="app/hooks/useLocalizedNavigate.ts"
-import { useLocale } from "react-intlayer";
-import { type NavigateOptions, type To, useNavigate } from "react-router";
-
-import { locacalizeTo } from "~/components/localized-link";
-
-export const useLocalizedNavigate = () => {
-  const navigate = useNavigate();
-  const { locale } = useLocale();
-
-  const localizedNavigate = (to: To, options?: NavigateOptions) => {
-    const localedTo = locacalizeTo(to, locale);
-
-    navigate(localedTo, options);
-  };
-
-  return localizedNavigate;
-};
-```
-
-</Step>
-
-<Step number={8} title="Создайте компонент переключателя локали">
-
-Создайте компонент, позволяющий пользователям менять язык:
-
-```tsx fileName="app/components/locale-switcher.tsx"
-import type { FC } from "react";
-
-import {
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedUrl,
-  getPathWithoutLocale,
-  Locales,
-} from "intlayer";
-import { useIntlayer, useLocale } from "react-intlayer";
-import { Link, useLocation } from "react-router";
-
-export const LocaleSwitcher: FC = () => {
-  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
-  const { pathname } = useLocation();
-
-  const { availableLocales, locale } = useLocale();
-
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
-
-  return (
-    <ol>
-      {availableLocales.map((localeItem) => (
-        <li key={localeItem}>
-          <Link
-            aria-current={localeItem === locale ? "page" : undefined}
-            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
-            reloadDocument // Перезагрузить страницу для применения новой локали
-            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
-          >
-            <span>
-              {/* Локаль - например, FR */}
-              {localeItem}
-            </span>
-            <span>
-              {/* Язык на его собственной локали - например, Français */}
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Язык на текущей локали - например, Francés при установленной локали Locales.SPANISH */}
-              {getLocaleName(localeItem)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Язык на английском - например, French */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </Link>
-        </li>
-      ))}
-    </ol>
-  );
-};
-```
-
-> Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={9} title="Добавление управления атрибутами HTML">
-
-Создайте хук для управления атрибутами lang и dir в HTML:
-
-```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
-import { getHTMLTextDir } from "intlayer";
-import { useEffect } from "react";
-import { useLocale } from "react-intlayer";
-
-export const useI18nHTMLAttributes = () => {
-  const { locale } = useLocale();
-
-  useEffect(() => {
-    document.documentElement.lang = locale;
-    document.documentElement.dir = getHTMLTextDir(locale);
-  }, [locale]);
-};
-```
-
-Этот хук уже используется в компоненте layout (`root.tsx`), показанном в Шаге 5.
-
-</Step>
-
-<Step number={10} title="Добавить middleware">
-
-Вы также можете использовать `intlayerProxy` для добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующий cookie локали. Если локаль не указана, плагин определит наиболее подходящую локаль на основе предпочтений языка браузера пользователя. Если локаль не обнаружена, она будет перенаправлена на локаль по умолчанию.
-
-> Обратите внимание, что для использования `intlayerProxy` в production, вам необходимо перенести пакет `vite-intlayer` из `devDependencies` в `dependencies`.
-
-> Начиная с Intlayer v9, `intlayerProxy()` встроен непосредственно в плагин `intlayer()` и включен по умолчанию через опцию `routing.enableProxy` (`true` по умолчанию). Регистрация его отдельно, как показано ниже, теперь необязательна — она сохранена для обратной совместимости и для конфигураций, которым нужно контролировать порядок плагинов. Установите `routing.enableProxy: false` для отказа. См. [примечания к выпуску v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/releases/v9.md).
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    reactRouter(),
-
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-</Step>
-
-<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
-
-Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
-
-Чтобы упростить этот процесс, Intlayer предлагает [компилятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) / [экстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md) для преобразования ваших компонентов и извлечения содержимого.
-
-Чтобы настроить его, вы можете добавить раздел `compiler` в ваш файл `intlayer.config.ts`:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... Остальная часть вашей конфигурации
-  compiler: {
-    /**
-     * Указывает, должен ли быть включен компилятор.
-     */
-    enabled: true,
-
-    /**
-     * Определяет путь к выходным файлам
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * Указывает, должны ли компоненты сохраняться после преобразования. Таким образом, компилятор можно запустить только один раз для преобразования приложения, а затем удалить.
-     */
-    saveComponents: false,
-
-    /**
-     * Префикс ключа словаря
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-<Tabs>
- <Tab value='Команда извлечения'>
-
-Запустите экстрактор для преобразования компонентов и извлечения содержимого
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bun x intlayer extract
-```
-
- </Tab>
- <Tab value='Компилятор Babel'>
-
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Обновите ваш `vite.config.ts`, чтобы включить плагин `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # Или npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # Or pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # Or yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
-
-</Step>
-
-</Steps>
-
-## Configure TypeScript
-
-Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
-
-Ensure your TypeScript configuration includes the autogenerated types:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... your existing configurations
-  include: [
-    // ... your existing includes
-    ".intlayer/**/*.ts", // Include the auto-generated types
-  ],
-}
-```
-
----
-
-## Git Configuration
-
-It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
-
-To do this, you can add the following instructions to your `.gitignore` file:
-
-```plaintext fileName=".gitignore"
-# Ignore the files generated by Intlayer
-.intlayer
-```
-
----
-
-## VS Code Extension
-
-To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
-
-[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-This extension provides:
-
-- **Autocompletion** for translation keys.
-- **Real-time error detection** for missing translations.
-- **Inline previews** of translated content.
-- **Quick actions** to easily create and update translations.
-
-For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
-## Go Further
-
-To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
-
----
-
-## Ссылки на документацию
-
-- [Документация Intlayer](https://intlayer.org)
-- [Документация React Router v7](https://reactrouter.com/)
-- [Документация React Router fs-routes](https://reactrouter.com/how-to/file-route-conventions)
-- [Хук useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayer.md)
-- [Хук useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md)
-- [Объявление контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md)
-- [Конфигурация](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md)
-
-Это подробное руководство содержит все необходимое для интеграции Intlayer с React Router v7 с использованием маршрутизации на основе файловой системы для полностью интернационализированного приложения с маршрутизацией, учитывающей локаль, и поддержкой TypeScript.
-
-## Часто задаваемые вопросы
-
-<FAQ>
-
-<Question title="Какие существуют решения для интернационализации приложения React Router v7?">
-
-- **`react-i18next` / `i18next`**: пространства имён JSON, загружаемые во время выполнения, с отдельным детектором локали, вручную подключённым к маршрутизатору.
-- **`react-intl`** и **`Lingui`**: сообщения ICU с этапом извлечения.
-- **`Intlayer`**: контент, объявленный рядом с каждым компонентом и скомпилированный во время сборки, типизированный от начала до конца, с помощниками для маршрутизации с учётом локали, ИИ-переводом, визуальным редактором и CMS.
-
-См. [почему Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/interest_of_intlayer.md) и [бенчмарк](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/benchmark/index.md).
-
-</Question>
-
-<Question title="Насколько i18n увеличивает размер бандла моего React Router?">
-
-Гораздо меньше, чем при подходе на основе пространств имён, потому что страница никогда не загружает каталог, который не отображает. Разметка, отрендеренная на сервере, разрешает свой контент на сервере, и компилятор во время сборки заменяет вызовы `useIntlayer` точными записями словаря, которые использует компонент, поэтому неиспользуемые ключи и неиспользуемые языки отбрасываются, а [динамические словари](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dynamic_dictionaries/index.md) разделяют остальное по локалям. По сравнению с обычными альтернативами Intlayer сокращает размер бандла и страницы до 50%. См. [оптимизацию бандла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/bundle_optimization.md) и [бенчмарк](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/benchmark/index.md).
-
-</Question>
-
-<Question title="Могу ли я мигрировать с `react-i18next` или `react-intl`, не переписывая свои компоненты?">
-
-Да, и есть два пути. Вы можете мигрировать контент постепенно с помощью [руководства по миграции с react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/migration_from_react-i18next_to_intlayer.md) или [руководства по миграции с i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/migration_from_i18next_to_intlayer.md). Или вы можете полностью сохранить свой текущий API: [адаптеры совместимости](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compat/index.md) предоставляют точно такой же API, как `react-i18next`, `react-intl` и `i18next`, но обслуживаемый словарями Intlayer, поэтому меняются импорты, а код компонентов - нет.
-
-</Question>
-
-<Question title="Могу ли я сохранить свои существующие файлы переводов JSON?">
-
-Да. [Плагин синхронизации JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/plugins/sync-json.md) сохраняет ваши файлы `/messages/{locale}/{namespace}.json` как источник истины и генерирует из них словари Intlayer, в обоих направлениях. [Плагин синхронизации PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/plugins/sync-po.md) делает то же самое для каталогов gettext, а [файлы по локали](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/per_locale_file.md) позволяют разделить контент по языкам вместо группировки локалей в одном файле.
-
-</Question>
-
-<Question title="Должен ли я переносить свой контент ключ за ключом?">
-
-Нет. Запустите `npx intlayer extract`, и Intlayer прочитает ваши компоненты, извлечёт строки, видимые пользователю, и запишет файл `.content` рядом с каждым из них, так что вы просматриваете diff вместо копирования строк в каталог по одной. Шаг 11 этого руководства проводит вас через это.
-
-Для полностью автоматизированного конвейера [Компилятор Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) делает то же самое во время сборки: он сканирует исходный код JSX, TSX, Vue и Svelte при каждом изменении, генерирует словари и поддерживает их синхронизацию через горячую замену модулей, поэтому вручную поддерживать ключи вообще не нужно.
-
-Стоит знать о двух ограничениях, прежде чем включать компилятор. Он работает через статический анализ, поэтому строки, существующие только во время выполнения, такие как коды ошибок API или поля CMS, остаются недоступными. И ему нужно отличать текст, видимый пользователю, от логики приложения вроде `className="active"` или кода статуса, что требует нескольких аннотаций в большой кодовой базе. [Команда extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md) избегает обоих ограничений, оставляя вас в процессе.
-
-</Question>
-
-<Question title="Какие инструменты для редактора и ИИ-агентов доступны?">
-
-Пять компонентов, все опциональные:
-
-- **[Расширение для VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/vs_code_extension.md)**: переход от ключа `useIntlayer` к файлу контента, который его объявляет, извлечение контента из компонента и запуск build, fill, test, push и pull из палитры команд или отдельной вкладки Intlayer.
-- **[LSP-сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/lsp.md)**: та же осведомлённость в любом редакторе, который говорит на LSP, с переходом к определению, поиском всех ссылок, предпросмотром переведённого значения при наведении, автодополнением ключей и полей и предупреждением, когда ключ нигде не объявлен. Он также разрешает вызовы `i18next`, `react-i18next`, `next-intl` и `use-intl`, что помогает при миграции.
-- **[MCP-сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/mcp_server.md)**: предоставляет документацию и CLI Intlayer для Cursor, VS Code, Claude Desktop, Claude Code и ChatGPT, чтобы ассистент отвечал по актуальной документации, а не гадал, и мог сам запускать команды вроде `intlayer fill`.
-- **[Навыки агентов](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/agent_skills.md)**: сфокусированные навыки, такие как `intlayer-config`, `intlayer-cli` и `intlayer-content`, плюс по одному на фреймворк, которые обучают агента вашей настройке маршрутизации и типам узлов контента.
-- **[Плагин ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/eslint.md)**: `no-raw-text` помечает жёстко закодированные строки, с дополнительными правилами для статических ключей словаря и неиспользуемого контента.
-
-</Question>
-
-<Question title="В чём разница между этим руководством и руководством по React Router на основе конфигурации?">
-
-Только то, как объявляются маршруты. Это руководство использует соглашения маршрутов на основе файловой системы, где сегмент локали берётся из имён файлов, тогда как [руководство на основе конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_react_router_v7.md) объявляет то же дерево в `routes.ts`. Объявления контента, хуки и конфигурация идентичны в обоих, поэтому вы можете сменить соглашения, не касаясь вашей i18n.
-
-</Question>
-
-<Question title="Как добавить сегмент локали при использовании маршрутов на основе файловой системы?">
-
-Шаги 4 и 5 охватывают это: локаль становится динамическим сегментом в именах файлов маршрутов, поэтому каждая страница под ней получает активную локаль. `validatePrefix` сообщает, является ли этот сегмент объявленной локалью, поэтому `/xx/about` возвращает настоящий 404 вместо рендеринга дублирующей страницы, а `getLocalizedUrl` переписывает любой путь на целевой язык.
-
-</Question>
-
-<Question title="Должен ли я помещать локаль в URL?">
-
-Нет. `routing.mode` принимает `"prefix-no-default"` (по умолчанию), `"prefix-all"`, `"no-prefix"` и `"search-params"`, а `routing.domains` сопоставляет каждую локаль с её собственным доменом. См. [справочник по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
-
-</Question>
-
-<Question title="Как добавить теги hreflang для SEO?">
-
-Постройте карту альтернатив с помощью `getMultilingualUrls` и выдайте её из экспорта `meta` или `links` вашего маршрута, включая запись `x-default`. Тот же помощник питает локализованный `sitemap.xml`.
-
-</Question>
-
-<Question title="Как создать переключатель языка, который остаётся на текущей странице?">
-
-Шаг 8 показывает компонент. `useLocale` предоставляет активную локаль, объявленные локали и сеттер, который сохраняет выбор, тогда как `getLocalizedUrl` переписывает текущий путь на целевой язык, поэтому читатель остаётся на том же маршруте вместо того, чтобы быть отправленным на главную страницу.
-
-</Question>
-
-<Question title="Как автоматически перевести приложение с помощью ИИ?">
-
-Запустите `npx intlayer fill`. Она заполняет недостающие переводы с помощью выбранной вами LLM, используя ваш собственный провайдер и API-ключ, а `--git-diff` ограничивает запуск контентом, изменённым в ветке. См. [команду fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/fill.md) и [интеграцию CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/CI_CD.md).
-
-</Question>
-
-<Question title="Поддерживает ли Intlayer множественное число, род и форматированный текст?">
-
-Да: [формы множественного числа](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/plurial.md), [контент на основе рода](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/gender.md), условия, [вставки](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/markdown.md) и [форматтеры](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/formatters.md) для чисел, дат и валют.
-
-</Question>
-
-<Question title="Как переводчики могут редактировать контент, не касаясь кода?">
-
-Через [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md), который работает на вашей собственной инфраструктуре и позволяет любому редактировать текст на месте в работающем приложении, или [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md), которая выносит контент вовне, чтобы он мог меняться без развёртывания.
-
-</Question>
-
-<Question title="Является ли Intlayer бесплатным и с открытым исходным кодом?">
-
-Да, по лицензии Apache 2.0, включая коммерческое использование. Размещённая CMS - это необязательный платный сервис, который также можно [разместить самостоятельно](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/self_hosting.md).
-
-</Question>
-
-</FAQ>