Intlayer - это библиотека интернационализации, разработанная специально для JavaScript-разработчиков. Она позволяет объявлять контент в любом месте вашего кода. Она преобразует объявления многоязычного контента в структурированные словари для легкой интеграции в ваш код. Благодаря использованию TypeScript, Intlayer делает вашу разработку более надежной и эффективной.

Зачем был создан Intlayer?

Intlayer был создан для решения общей проблемы, которая затрагивает все популярные i18n библиотеки, такие как next-intl, react-i18next, react-intl, next-i18next, react-intl и vue-i18n.

Все эти решения используют централизованный подход для перечисления и управления вашим контентом. Например:

bash

Копировать код

Копировать код в буфер обмена

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Или с использованием пространств имен:

bash

Копировать код

Копировать код в буфер обмена

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Такая архитектура замедляет процесс разработки и усложняет поддержку кодовой базы по нескольким причинам:

Для каждого нового созданного компонента вам необходимо:
- Создать новый ресурс/пространство имен в папке locales
- Не забыть импортировать новое пространство имен на свою страницу
- Перевести ваш контент (часто делается вручную путем копирования/вставки из ИИ-провайдеров)
Для любого изменения в ваших компонентах вам необходимо:
- Искать соответствующий ресурс/пространство имен (далеко от компонента)
- Перевести ваш контент
- Убедиться, что ваш контент актуален для всех локалей
- Проверить, что ваше пространство имен не содержит неиспользуемых ключей/значений
- Убедиться, что структура ваших JSON-файлов одинакова для всех локалей

В профессиональных проектах, использующих эти решения, часто применяются платформы локализации для управления переводом контента. Однако для крупных проектов это может быстро стать дорогостоящим.

Для решения этой проблемы Intlayer использует подход, который ограничивает область действия вашего контента каждым компонентом и хранит его рядом с компонентом, как мы часто делаем с CSS (styled-components), типами, документацией (storybook) или модульными тестами (jest).

bash

Копировать код

Копировать код в буфер обмена

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

./components/MyComponent/index.content.ts

Копировать код

Копировать код в буфер обмена

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

./components/MyComponent/index.tsx

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Этот подход позволяет вам:

Увеличить скорость разработки
- Файлы .content.{{ts|mjs|cjs|json}} можно создавать с помощью расширения VSCode
- Инструменты автодополнения с ИИ в вашей IDE (например, GitHub Copilot) могут помочь вам объявлять контент, уменьшая необходимость копирования/вставки
Очистить вашу кодовую базу
- Уменьшить сложность
- Повысить удобство поддержки
Легче дублировать компоненты и связанный с ними контент (например, компоненты входа/регистрации и т. д.)
- Ограничивая риск влияния на контент других компонентов
- Копируя и вставляя ваш контент из одного приложения в другое без внешних зависимостей
Избежать загрязнения кодовой базы неиспользуемыми ключами/значениями для неиспользуемых компонентов
- Если вы не используете компонент, Intlayer не будет импортировать связанный с ним контент
- Если вы удалите компонент, вам будет проще вспомнить об удалении связанного с ним контента, так как он будет находиться в той же папке
Снизить когнитивную нагрузку для ИИ-агентов при объявлении вашего многоязычного контента
- ИИ-агенту не придется сканировать всю кодовую базу, чтобы узнать, где реализовать ваш контент
- Переводы могут легко выполняться инструментами автодополнения с ИИ в вашей IDE (например, GitHub Copilot)
Оптимизировать производительность загрузки
- Если компонент загружается лениво, связанный с ним контент будет загружен одновременно

Дополнительные возможности Intlayer

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Возможность	Описание
	Поддержка различных фреймворков Intlayer совместим со всеми основными фреймворками и библиотеками, включая Next.js, React, Vite, Vue.js, Nuxt, Preact, Express и другими.
	Управление контентом на базе JavaScript Используйте гибкость JavaScript для эффективного определения и управления контентом. - Объявление контента
	Компилятор Компилятор Intlayer автоматически извлекает контент из компонентов и генерирует файлы словарей. - Компилятор
	Файл объявления контента для каждой локали Ускорьте разработку, объявив контент один раз перед автоматической генерацией. - Файл объявления контента для каждой локали
	Типобезопасная среда Используйте TypeScript, чтобы гарантировать отсутствие ошибок в определениях контента и коде, а также пользуйтесь автодополнением в IDE. - Настройка TypeScript
	Упрощенная настройка Быстро приступайте к работе с минимальной конфигурацией. Легко настраивайте параметры интернационализации, маршрутизации, ИИ, сборки и обработки контента. - Изучите интеграцию с Next.js
	Упрощенное извлечение контента Нет необходимости вызывать функцию `t` для каждой части контента. Извлекайте весь контент напрямую с помощью одного хука. - Интеграция с React
	Согласованная реализация серверных компонентов Идеально подходит для серверных компонентов Next.js: используйте одну и ту же реализацию как для клиентских, так и для серверных компонентов, без необходимости передавать функцию `t` через каждый серверный компонент. - Серверные компоненты
	Организованная кодовая база Держите кодовую базу в порядке: 1 компонент = 1 словарь в той же папке. Переводы рядом с соответствующими компонентами упрощают поддержку и понимание. - Как работает Intlayer
	Улучшенная маршрутизация Полная поддержка маршрутизации приложений, плавно адаптирующаяся к сложным структурам приложений для Next.js, React, Vite, Vue.js и т. д. - Изучите интеграцию с Next.js
	Поддержка Markdown Импортируйте и интерпретируйте локальные файлы и удаленный Markdown для многоязычного контента, такого как политики конфиденциальности, документация и т. д. Интерпретируйте и делайте метаданные Markdown доступными в вашем коде. - Файлы контента
	Бесплатный визуальный редактор и CMS Для авторов контента доступны бесплатный визуальный редактор и CMS, что избавляет от необходимости в платформе локализации. Синхронизируйте контент с помощью Git или вынесите его полностью или частично во внешнюю CMS. - Редактор Intlayer - CMS Intlayer
	Tree-shakable контент Tree-shakable контент, уменьшающий размер финального бандла. Загружает контент для каждого компонента, исключая неиспользуемый контент из бандла. Поддерживает ленивую загрузку для повышения эффективности загрузки приложения. - Оптимизация сборки приложения
	Статический рендеринг Не блокирует статический рендеринг. - Интеграция с Next.js
	Перевод на базе ИИ Переведите ваш сайт на 231 язык всего одним щелчком мыши, используя передовые инструменты перевода Intlayer на базе ИИ с вашим собственным ИИ-провайдером/API-ключом. - Интеграция CI/CD - Intlayer CLI - Автозаполнение
	Интеграция с MCP-сервером Предоставляет сервер MCP (Model Context Protocol) для автоматизации IDE, обеспечивая бесшовное управление контентом и рабочие процессы i18n непосредственно в вашей среде разработки. - MCP-сервер
	Расширение VSCode Intlayer предоставляет расширение VSCode, которое поможет вам управлять контентом и переводами, создавать словари, переводить контент и многое другое. - Расширение VSCode
	Совместимость Обеспечивает совместимость с react-i18next, next-i18next, next-intl и react-intl. - Intlayer и react-intl - Intlayer и next-intl - Intlayer и next-i18next
Тестирование отсутствующих переводов (CLI/CI)	✅ CLI: npx intlayer content test (аудит, совместимый с CI)

Сравнение Intlayer с другими решениями

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Возможность	`intlayer`	`react-i18next`	`react-intl` (FormatJS)	`lingui`	`next-intl`	`next-i18next`	`vue-i18n`
Переводы рядом с компонентами	✅ Да, контент расположен вместе с каждым компонентом	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет	✅ Да - при использовании `Single File Components` (SFCs)
Интеграция с TypeScript	✅ Продвинутая, автоматически генерируемые строгие типы	⚠️ Базовая; требуется дополнительная настройка для безопасности	✅ Хорошая, но менее строгая	⚠️ Типизация, требуется настройка	✅ Хорошая	⚠️ Базовая	✅ Хорошая (типы доступны; требуется настройка безопасности ключей)
Обнаружение отсутствующих переводов	✅ Подсветка ошибок в TypeScript и ошибка/предупреждение во время сборки	⚠️ В основном резервные строки во время выполнения	⚠️ Резервные строки	⚠️ Требуется дополнительная настройка	⚠️ Резерв во время выполнения	⚠️ Резерв во время выполнения	⚠️ Резервные строки/предупреждения во время выполнения (настраиваемо)
Богатый контент (JSX/Markdown/компоненты)	✅ Прямая поддержка	⚠️ Ограничено / только интерполяция	⚠️ Синтаксис ICU, а не настоящий JSX	⚠️ Ограничено	❌ Не предназначено для богатых узлов	⚠️ Ограничено	⚠️ Ограничено (компоненты через `<i18n-t>`, Markdown через плагины)
Перевод на базе ИИ	✅ Да, поддерживает несколько ИИ-провайдеров. Можно использовать собственные API-ключи. Учитывает контекст приложения и область контента	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет
Визуальный редактор	✅ Да, локальный визуальный редактор + опциональная CMS; можно выносить контент из кодовой базы; встраиваемый	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации
Локализованная маршрутизация	✅ Да, поддерживает локализованные пути из коробки (работает с Next.js и Vite)	⚠️ Нет встроенной, требуются плагины (например, `next-i18next`) или пользовательская настройка роутера	❌ Нет, только форматирование сообщений, маршрутизация должна быть ручной	⚠️ Нет встроенной, требуются плагины или ручная настройка	✅ Встроено, App Router поддерживает сегмент `[locale]`	✅ Встроено	✅ Встроено
Динамическая генерация маршрутов	✅ Да	⚠️ Плагин/экосистема или ручная настройка	❌ Не предоставляется	⚠️ Плагин/вручную	✅ Да	✅ Да	❌ Не предоставляется (предоставляется Nuxt i18n)
Плюрализация	✅ Шаблоны на основе перечислений	✅ Настраиваемо (плагины, такие как i18next-icu)	✅ (ICU)	✅ (ICU/messageformat)	✅ Хорошо	✅ Хорошо	✅ Встроенные правила плюрализации
Форматирование (даты, числа, валюты)	✅ Оптимизированные форматтеры (Intl под капотом)	⚠️ Через плагины или пользовательское использование Intl	✅ Форматтеры ICU	✅ ICU/CLI хелперы	✅ Хорошо (Intl хелперы)	✅ Хорошо (Intl хелперы)	✅ Встроенные форматтеры даты/чисел (Intl)
Формат контента	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
Поддержка ICU	⚠️ WIP	⚠️ Через плагин (i18next-icu)	✅ Да	✅ Да	✅ Да	⚠️ Через плагин (`i18next-icu`)	⚠️ Через пользовательский форматтер/компилятор
SEO хелперы (hreflang, sitemap)	✅ Встроенные инструменты: хелперы для sitemap, robots.txt, метаданных	⚠️ Плагины сообщества/вручную	❌ Нет в ядре	❌ Нет в ядре	✅ Хорошо	✅ Хорошо	❌ Нет в ядре (предоставляется Nuxt i18n хелперами)
Экосистема / Сообщество	⚠️ Меньше, но быстро растет и активно развивается	✅ Самое большое и зрелое	✅ Большое	⚠️ Меньше	✅ Среднего размера, ориентировано на Next.js	✅ Среднего размера, ориентировано на Next.js	✅ Большое в экосистеме Vue
SSR и серверные компоненты	✅ Да, оптимизировано для SSR / React Server Components	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	⚠️ Поддерживается на уровне страницы с дополнительной настройкой, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	✅ Поддерживается, требуется настройка	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	✅ SSR через Nuxt/Vue SSR (без RSC)
Tree-shaking (загрузка только нужного контента)	✅ Да, для каждого компонента во время сборки через плагины Babel/SWC	⚠️ Обычно загружает всё (можно улучшить с помощью пространств имен/разделения кода)	⚠️ Обычно загружает всё	❌ Не по умолчанию	⚠️ Частично	⚠️ Частично	⚠️ Частично (с разделением кода/ручной настройкой)
Ленивая загрузка	✅ Да, для каждой локали / для каждого словаря	✅ Да (например, бэкенды/пространства имен по запросу)	✅ Да (разделение бандлов локалей)	✅ Да (динамический импорт каталогов)	✅ Да (для каждого маршрута/локали), требуется управление пространствами имен	✅ Да (для каждого маршрута/локали), требуется управление пространствами имен	✅ Да (асинхронные сообщения локали)
Очистка неиспользуемого контента	✅ Да, для каждого словаря во время сборки	❌ Нет, только через ручную сегментацию пространств имен	❌ Нет, все объявленные сообщения попадают в бандл	✅ Да, неиспользуемые ключи обнаруживаются и удаляются при сборке	❌ Нет, можно управлять вручную через пространства имен	❌ Нет, можно управлять вручную через пространства имен	❌ Нет, возможно только через ручную ленивую загрузку
Управление крупными проектами	✅ Поощряет модульность, подходит для дизайн-систем	⚠️ Требуется хорошая дисциплина файлов	⚠️ Центральные каталоги могут стать большими	⚠️ Может стать сложным	✅ Модульно с настройкой	✅ Модульно с настройкой	✅ Модульно с настройкой Vue Router/Nuxt i18n

Звезды на GitHub

Звезды на GitHub - это сильный индикатор популярности проекта, доверия сообщества и долгосрочной актуальности. Хотя они не являются прямым показателем технического качества, они отражают, сколько разработчиков считают проект полезным, следят за его прогрессом и, вероятно, будут его использовать. Для оценки ценности проекта звезды помогают сравнивать популярность альтернатив и дают представление о росте экосистемы.

Совместимость

intlayer также может помочь в управлении вашими пространствами имен react-intl, react-i18next, next-intl, next-i18next и vue-i18n.

Используя intlayer, вы можете объявлять свой контент в формате вашей любимой библиотеки i18n, и intlayer сгенерирует ваши пространства имен в выбранном вами месте (например: /messages/{{locale}}/{{namespace}}.json).

Начать

Создание:2024-08-14Последнее обновление:2025-09-27

Ссылайтесь на этот документ на ваш любимый ассистент AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Выпуск компилятора"
v7.3.127.11.2025
"Обновление сравнительной таблицы"
v5.8.019.08.2025
"Инициализация истории"
v5.5.1029.06.2025

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Почему стоит выбрать Intlayer?

Что такое Intlayer?

Зачем был создан Intlayer?

Все эти решения используют централизованный подход для перечисления и управления вашим контентом. Например:

bash

Копировать код

Копировать код в буфер обмена

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Или с использованием пространств имен:

bash

Копировать код

Копировать код в буфер обмена

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Такая архитектура замедляет процесс разработки и усложняет поддержку кодовой базы по нескольким причинам:

Для каждого нового созданного компонента вам необходимо:
- Создать новый ресурс/пространство имен в папке locales
- Не забыть импортировать новое пространство имен на свою страницу
- Перевести ваш контент (часто делается вручную путем копирования/вставки из ИИ-провайдеров)
Для любого изменения в ваших компонентах вам необходимо:
- Искать соответствующий ресурс/пространство имен (далеко от компонента)
- Перевести ваш контент
- Убедиться, что ваш контент актуален для всех локалей
- Проверить, что ваше пространство имен не содержит неиспользуемых ключей/значений
- Убедиться, что структура ваших JSON-файлов одинакова для всех локалей

bash

Копировать код

Копировать код в буфер обмена

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

./components/MyComponent/index.content.ts

Копировать код

Копировать код в буфер обмена

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

./components/MyComponent/index.tsx

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Этот подход позволяет вам:

Увеличить скорость разработки
- Файлы .content.{{ts|mjs|cjs|json}} можно создавать с помощью расширения VSCode
- Инструменты автодополнения с ИИ в вашей IDE (например, GitHub Copilot) могут помочь вам объявлять контент, уменьшая необходимость копирования/вставки
Очистить вашу кодовую базу
- Уменьшить сложность
- Повысить удобство поддержки
Легче дублировать компоненты и связанный с ними контент (например, компоненты входа/регистрации и т. д.)
- Ограничивая риск влияния на контент других компонентов
- Копируя и вставляя ваш контент из одного приложения в другое без внешних зависимостей
Избежать загрязнения кодовой базы неиспользуемыми ключами/значениями для неиспользуемых компонентов
- Если вы не используете компонент, Intlayer не будет импортировать связанный с ним контент
- Если вы удалите компонент, вам будет проще вспомнить об удалении связанного с ним контента, так как он будет находиться в той же папке
Снизить когнитивную нагрузку для ИИ-агентов при объявлении вашего многоязычного контента
- ИИ-агенту не придется сканировать всю кодовую базу, чтобы узнать, где реализовать ваш контент
- Переводы могут легко выполняться инструментами автодополнения с ИИ в вашей IDE (например, GitHub Copilot)
Оптимизировать производительность загрузки
- Если компонент загружается лениво, связанный с ним контент будет загружен одновременно

Дополнительные возможности Intlayer

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Возможность	Описание
	Поддержка различных фреймворков Intlayer совместим со всеми основными фреймворками и библиотеками, включая Next.js, React, Vite, Vue.js, Nuxt, Preact, Express и другими.
	Управление контентом на базе JavaScript Используйте гибкость JavaScript для эффективного определения и управления контентом. - Объявление контента
	Компилятор Компилятор Intlayer автоматически извлекает контент из компонентов и генерирует файлы словарей. - Компилятор
	Файл объявления контента для каждой локали Ускорьте разработку, объявив контент один раз перед автоматической генерацией. - Файл объявления контента для каждой локали
	Типобезопасная среда Используйте TypeScript, чтобы гарантировать отсутствие ошибок в определениях контента и коде, а также пользуйтесь автодополнением в IDE. - Настройка TypeScript
	Упрощенная настройка Быстро приступайте к работе с минимальной конфигурацией. Легко настраивайте параметры интернационализации, маршрутизации, ИИ, сборки и обработки контента. - Изучите интеграцию с Next.js
	Упрощенное извлечение контента Нет необходимости вызывать функцию `t` для каждой части контента. Извлекайте весь контент напрямую с помощью одного хука. - Интеграция с React
	Согласованная реализация серверных компонентов Идеально подходит для серверных компонентов Next.js: используйте одну и ту же реализацию как для клиентских, так и для серверных компонентов, без необходимости передавать функцию `t` через каждый серверный компонент. - Серверные компоненты
	Организованная кодовая база Держите кодовую базу в порядке: 1 компонент = 1 словарь в той же папке. Переводы рядом с соответствующими компонентами упрощают поддержку и понимание. - Как работает Intlayer
	Улучшенная маршрутизация Полная поддержка маршрутизации приложений, плавно адаптирующаяся к сложным структурам приложений для Next.js, React, Vite, Vue.js и т. д. - Изучите интеграцию с Next.js
	Поддержка Markdown Импортируйте и интерпретируйте локальные файлы и удаленный Markdown для многоязычного контента, такого как политики конфиденциальности, документация и т. д. Интерпретируйте и делайте метаданные Markdown доступными в вашем коде. - Файлы контента
	Бесплатный визуальный редактор и CMS Для авторов контента доступны бесплатный визуальный редактор и CMS, что избавляет от необходимости в платформе локализации. Синхронизируйте контент с помощью Git или вынесите его полностью или частично во внешнюю CMS. - Редактор Intlayer - CMS Intlayer
	Tree-shakable контент Tree-shakable контент, уменьшающий размер финального бандла. Загружает контент для каждого компонента, исключая неиспользуемый контент из бандла. Поддерживает ленивую загрузку для повышения эффективности загрузки приложения. - Оптимизация сборки приложения
	Статический рендеринг Не блокирует статический рендеринг. - Интеграция с Next.js
	Перевод на базе ИИ Переведите ваш сайт на 231 язык всего одним щелчком мыши, используя передовые инструменты перевода Intlayer на базе ИИ с вашим собственным ИИ-провайдером/API-ключом. - Интеграция CI/CD - Intlayer CLI - Автозаполнение
	Интеграция с MCP-сервером Предоставляет сервер MCP (Model Context Protocol) для автоматизации IDE, обеспечивая бесшовное управление контентом и рабочие процессы i18n непосредственно в вашей среде разработки. - MCP-сервер
	Расширение VSCode Intlayer предоставляет расширение VSCode, которое поможет вам управлять контентом и переводами, создавать словари, переводить контент и многое другое. - Расширение VSCode
	Совместимость Обеспечивает совместимость с react-i18next, next-i18next, next-intl и react-intl. - Intlayer и react-intl - Intlayer и next-intl - Intlayer и next-i18next
Тестирование отсутствующих переводов (CLI/CI)	✅ CLI: npx intlayer content test (аудит, совместимый с CI)

Сравнение Intlayer с другими решениями

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Возможность	`intlayer`	`react-i18next`	`react-intl` (FormatJS)	`lingui`	`next-intl`	`next-i18next`	`vue-i18n`
Переводы рядом с компонентами	✅ Да, контент расположен вместе с каждым компонентом	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет	✅ Да - при использовании `Single File Components` (SFCs)
Интеграция с TypeScript	✅ Продвинутая, автоматически генерируемые строгие типы	⚠️ Базовая; требуется дополнительная настройка для безопасности	✅ Хорошая, но менее строгая	⚠️ Типизация, требуется настройка	✅ Хорошая	⚠️ Базовая	✅ Хорошая (типы доступны; требуется настройка безопасности ключей)
Обнаружение отсутствующих переводов	✅ Подсветка ошибок в TypeScript и ошибка/предупреждение во время сборки	⚠️ В основном резервные строки во время выполнения	⚠️ Резервные строки	⚠️ Требуется дополнительная настройка	⚠️ Резерв во время выполнения	⚠️ Резерв во время выполнения	⚠️ Резервные строки/предупреждения во время выполнения (настраиваемо)
Богатый контент (JSX/Markdown/компоненты)	✅ Прямая поддержка	⚠️ Ограничено / только интерполяция	⚠️ Синтаксис ICU, а не настоящий JSX	⚠️ Ограничено	❌ Не предназначено для богатых узлов	⚠️ Ограничено	⚠️ Ограничено (компоненты через `<i18n-t>`, Markdown через плагины)
Перевод на базе ИИ	✅ Да, поддерживает несколько ИИ-провайдеров. Можно использовать собственные API-ключи. Учитывает контекст приложения и область контента	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет	❌ Нет
Визуальный редактор	✅ Да, локальный визуальный редактор + опциональная CMS; можно выносить контент из кодовой базы; встраиваемый	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации	❌ Нет / доступно через внешние платформы локализации
Локализованная маршрутизация	✅ Да, поддерживает локализованные пути из коробки (работает с Next.js и Vite)	⚠️ Нет встроенной, требуются плагины (например, `next-i18next`) или пользовательская настройка роутера	❌ Нет, только форматирование сообщений, маршрутизация должна быть ручной	⚠️ Нет встроенной, требуются плагины или ручная настройка	✅ Встроено, App Router поддерживает сегмент `[locale]`	✅ Встроено	✅ Встроено
Динамическая генерация маршрутов	✅ Да	⚠️ Плагин/экосистема или ручная настройка	❌ Не предоставляется	⚠️ Плагин/вручную	✅ Да	✅ Да	❌ Не предоставляется (предоставляется Nuxt i18n)
Плюрализация	✅ Шаблоны на основе перечислений	✅ Настраиваемо (плагины, такие как i18next-icu)	✅ (ICU)	✅ (ICU/messageformat)	✅ Хорошо	✅ Хорошо	✅ Встроенные правила плюрализации
Форматирование (даты, числа, валюты)	✅ Оптимизированные форматтеры (Intl под капотом)	⚠️ Через плагины или пользовательское использование Intl	✅ Форматтеры ICU	✅ ICU/CLI хелперы	✅ Хорошо (Intl хелперы)	✅ Хорошо (Intl хелперы)	✅ Встроенные форматтеры даты/чисел (Intl)
Формат контента	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
Поддержка ICU	⚠️ WIP	⚠️ Через плагин (i18next-icu)	✅ Да	✅ Да	✅ Да	⚠️ Через плагин (`i18next-icu`)	⚠️ Через пользовательский форматтер/компилятор
SEO хелперы (hreflang, sitemap)	✅ Встроенные инструменты: хелперы для sitemap, robots.txt, метаданных	⚠️ Плагины сообщества/вручную	❌ Нет в ядре	❌ Нет в ядре	✅ Хорошо	✅ Хорошо	❌ Нет в ядре (предоставляется Nuxt i18n хелперами)
Экосистема / Сообщество	⚠️ Меньше, но быстро растет и активно развивается	✅ Самое большое и зрелое	✅ Большое	⚠️ Меньше	✅ Среднего размера, ориентировано на Next.js	✅ Среднего размера, ориентировано на Next.js	✅ Большое в экосистеме Vue
SSR и серверные компоненты	✅ Да, оптимизировано для SSR / React Server Components	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	⚠️ Поддерживается на уровне страницы с дополнительной настройкой, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	✅ Поддерживается, требуется настройка	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	⚠️ Поддерживается на уровне страницы, но нужно передавать t-функции по дереву компонентов для дочерних серверных компонентов	✅ SSR через Nuxt/Vue SSR (без RSC)
Tree-shaking (загрузка только нужного контента)	✅ Да, для каждого компонента во время сборки через плагины Babel/SWC	⚠️ Обычно загружает всё (можно улучшить с помощью пространств имен/разделения кода)	⚠️ Обычно загружает всё	❌ Не по умолчанию	⚠️ Частично	⚠️ Частично	⚠️ Частично (с разделением кода/ручной настройкой)
Ленивая загрузка	✅ Да, для каждой локали / для каждого словаря	✅ Да (например, бэкенды/пространства имен по запросу)	✅ Да (разделение бандлов локалей)	✅ Да (динамический импорт каталогов)	✅ Да (для каждого маршрута/локали), требуется управление пространствами имен	✅ Да (для каждого маршрута/локали), требуется управление пространствами имен	✅ Да (асинхронные сообщения локали)
Очистка неиспользуемого контента	✅ Да, для каждого словаря во время сборки	❌ Нет, только через ручную сегментацию пространств имен	❌ Нет, все объявленные сообщения попадают в бандл	✅ Да, неиспользуемые ключи обнаруживаются и удаляются при сборке	❌ Нет, можно управлять вручную через пространства имен	❌ Нет, можно управлять вручную через пространства имен	❌ Нет, возможно только через ручную ленивую загрузку
Управление крупными проектами	✅ Поощряет модульность, подходит для дизайн-систем	⚠️ Требуется хорошая дисциплина файлов	⚠️ Центральные каталоги могут стать большими	⚠️ Может стать сложным	✅ Модульно с настройкой	✅ Модульно с настройкой	✅ Модульно с настройкой Vue Router/Nuxt i18n

Звезды на GitHub

Совместимость

intlayer также может помочь в управлении вашими пространствами имен react-intl, react-i18next, next-intl, next-i18next и vue-i18n.

Начать