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

Або тут з використанням просторів назв (namespaces):

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)
Оптимізувати продуктивність завантаження
- Якщо компонент завантажується ледаче (lazy-loaded), пов’язаний з ним вміст завантажуватиметься одночасно

Додаткові функції Intlayer

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Функція	Опис
	Підтримка різних фреймворків Intlayer сумісний з усіма основними фреймворками та бібліотеками, включаючи Next.js, React, Vite, Vue.js, Nuxt, Preact, Express та інші.
	Управління вмістом на основі JavaScript Використовуйте гнучкість JavaScript для ефективного визначення та управління вашим вмістом. - Оголошення вмісту
	Компілятор Компілятор Intlayer автоматично витягує вміст із компонентів і генерує файли словників. - Компілятор
	Файл оголошення вмісту для кожної мови Прискорте розробку, оголосивши вміст один раз перед автоматичною генерацією. - Файл оголошення вмісту для кожної мови
	Середовище Type-Safe Використовуйте TypeScript, щоб переконатися, що ваші визначення вмісту та код не містять помилок, а також користуйтеся перевагами автозаповнення IDE. - Конфігурація TypeScript
	Спрощене налаштування Швидко розпочніть роботу з мінімальною конфігурацією. Легко налаштовуйте параметри інтернаціоналізації, маршрутизації, ШІ, збірки та обробки вмісту. - Дослідіть інтеграцію Next.js
	Спрощене отримання вмісту Не потрібно викликати функцію `t` для кожного елемента вмісту. Отримуйте весь вміст безпосередньо за допомогою одного хука. - Інтеграція React
	Узгоджена реалізація Server Component Ідеально підходить для серверних компонентів Next.js, використовуйте ту саму реалізацію для клієнтських і серверних компонентів, не потрібно передавати функцію `t` через кожен серверний компонент. - Server Components
	Організована кодова база Тримайте кодову базу більш організованою: 1 компонент = 1 словник у тій же папці. Переклади поруч із їхніми відповідними компонентами покращують підтримку та чіткість. - Як працює Intlayer
	Покращена маршрутизація Повна підтримка маршрутизації додатків, що плавно адаптується до складних структур додатків для Next.js, React, Vite, Vue.js тощо. - Дослідіть інтеграцію Next.js
	Підтримка Markdown Імпортуйте та інтерпретуйте локальні файли та віддалений Markdown для багатомовного вмісту, такого як політики конфіденційності, документація тощо. Інтерпретуйте та робіть метадані Markdown доступними у вашому коді. - Файли вмісту
	Безкоштовний візуальний редактор та CMS Для авторів вмісту доступний безкоштовний візуальний редактор та CMS, що усуває потребу в платформі локалізації. Синхронізуйте свій вміст за допомогою Git або повністю або частково винесіть його на аутсорс за допомогою CMS. - Редактор Intlayer - Intlayer CMS
	Вміст типу 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 та помилки/попередження під час збірки	⚠️ Переважно рядки відкату (fallback) під час виконання	⚠️ Рядки відкату	⚠️ Потрібна додаткова конфігурація	⚠️ Відкат під час виконання	⚠️ Відкат під час виконання	⚠️ Відкат/попередження під час виконання (можна налаштувати)
Багатий вміст (JSX/Markdown/компоненти)	✅ Пряма підтримка	⚠️ Обмежено / лише інтерполяція	⚠️ Синтаксис ICU, не справжній JSX	⚠️ Обмежено	❌ Не розраховано на багаті вузли	⚠️ Обмежено	⚠️ Обмежено (компоненти через `<i18n-t>`, Markdown через плагіни)
Переклад на основі ШІ	✅ Так, підтримує кількох постачальників ШІ. Можна використовувати з власними ключами API. Враховує контекст додатка та обсяг вмісту	❌ Ні	❌ Ні	❌ Ні	❌ Ні	❌ Ні	❌ Ні
Візуальний редактор	✅ Так, локальний візуальний редактор + опціональна CMS; може виносити вміст кодової бази на аутсорс; вбудовуваний	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації
Локалізована маршрутизація	✅ Так, підтримує локалізовані шляхи "з коробки" (працює з Next.js та Vite)	⚠️ Немає вбудованої, потрібні плагіни (наприклад, `next-i18next`) або власна конфігурація маршрутизатора	❌ Ні, лише форматування повідомлень, маршрутизація має бути ручною	⚠️ Немає вбудованої, потрібні плагіни або ручне налаштування	✅ Вбудовано, App Router підтримує сегмент `[locale]`	✅ Вбудовано	✅ Вбудовано
Динамічне генерування маршрутів	✅ Так	⚠️ Плагін/екосистема або ручне налаштування	❌ Не надається	⚠️ Плагін/вручну	✅ Так	✅ Так	❌ Не надається (надає Nuxt i18n)
Множина	✅ Шаблони на основі перерахувань (enums)	✅ Можна налаштувати (плагіни, такі як i18next-icu)	✅ (ICU)	✅ (ICU/messageformat)	✅ Добре	✅ Добре	✅ Вбудовані правила множини
Форматування (дати, числа, валюти)	✅ Оптимізовані форматувальники (Intl під капотом)	⚠️ Через плагіни або власне використання Intl	✅ Форматувальники ICU	✅ Хелпери ICU/CLI	✅ Добре (хелпери Intl)	✅ Добре (хелпери Intl)	✅ Вбудовані форматувальники дат/чисел (Intl)
Формат вмісту	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml в роботі)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
Підтримка ICU	⚠️ В роботі	⚠️ Через плагін (i18next-icu)	✅ Так	✅ Так	✅ Так	⚠️ Через плагін (`i18next-icu`)	⚠️ Через власний форматувальник/компілятор
Хелпери SEO (hreflang, sitemap)	✅ Вбудовані інструменти: хелпери для sitemap, robots.txt, метаданих	⚠️ Плагіни спільноти / вручну	❌ Не є основним	❌ Не є основним	✅ Добре	✅ Добре	❌ Не є основним (надає хелпери Nuxt i18n)
Екосистема / Спільнота	⚠️ Менша, але швидко зростає та чуйно реагує	✅ Найбільша та зріла	✅ Велика	⚠️ Менша	✅ Середнього розміру, зосереджена на Next.js	✅ Середнього розміру, зосереджена на Next.js	✅ Велика в екосистемі Vue
Server-side Rendering та Server Components	✅ Так, спрощено для SSR / React Server Components	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	⚠️ Підтримується на рівні сторінки з додатковим налаштуванням, але потрібно передавати t-функції вниз по дереву компонентів	✅ Підтримується, потрібне налаштування	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	✅ SSR через Nuxt/Vue SSR (без RSC)
Tree-shaking (завантаження лише використаного)	✅ Так, для кожного компонента під час збірки через плагіни Babel/SWC	⚠️ Зазвичай завантажує все (можна покращити через простори назв / code-splitting)	⚠️ Зазвичай завантажує все	❌ Не типово	⚠️ Частково	⚠️ Частково	⚠️ Частково (з code-splitting / ручним налаштуванням)
Ледаче завантаження (Lazy loading)	✅ Так, для кожної мови / для кожного словника	✅ Так (наприклад, бекенди/простори назв за запитом)	✅ Так (розділення мовних пакетів)	✅ Так (динамічний імпорт каталогів)	✅ Так (на маршрут / на мову), потрібне управління просторами назв	✅ Так (на маршрут / на мову), потрібне управління просторами назв	✅ Так (асинхронні мовні повідомлення)
Очищення невикористаного вмісту	✅ Так, для кожного словника під час збірки	❌ Ні, лише через ручне розділення просторів назв	❌ Ні, усі оголошені повідомлення пакуються	✅ Так, невикористані ключі виявляються та видаляються при збірці	❌ Ні, можна керувати вручну за допомогою управління просторами назв	❌ Ні, можна керувати вручну за допомогою управління просторами назв	❌ Ні, можливо лише через ручне ледаче завантаження
Управління великими проектами	✅ Заохочує модульність, підходить для дизайн-систем	⚠️ Потрібна хороша дисципліна файлів	⚠️ Центральні каталоги можуть стати великими	⚠️ Може стати складним	✅ Модульно з налаштуванням	✅ Модульно з налаштуванням	✅ Модульно з налаштуванням 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

Історія версій

"Випуск Компілятора"
v7.3.127.11.2025
"Оновлення порівняльної таблиці"
v5.8.019.08.2025
"Початкова історія"
v5.5.1029.06.2025

Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

Переглянути останню версію оригінального вмісту англійською

Редагувати цей документ

Якщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.

Посилання на документацію на 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

Або тут з використанням просторів назв (namespaces):

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)
Оптимізувати продуктивність завантаження
- Якщо компонент завантажується ледаче (lazy-loaded), пов’язаний з ним вміст завантажуватиметься одночасно

Додаткові функції Intlayer

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Функція	Опис
	Підтримка різних фреймворків Intlayer сумісний з усіма основними фреймворками та бібліотеками, включаючи Next.js, React, Vite, Vue.js, Nuxt, Preact, Express та інші.
	Управління вмістом на основі JavaScript Використовуйте гнучкість JavaScript для ефективного визначення та управління вашим вмістом. - Оголошення вмісту
	Компілятор Компілятор Intlayer автоматично витягує вміст із компонентів і генерує файли словників. - Компілятор
	Файл оголошення вмісту для кожної мови Прискорте розробку, оголосивши вміст один раз перед автоматичною генерацією. - Файл оголошення вмісту для кожної мови
	Середовище Type-Safe Використовуйте TypeScript, щоб переконатися, що ваші визначення вмісту та код не містять помилок, а також користуйтеся перевагами автозаповнення IDE. - Конфігурація TypeScript
	Спрощене налаштування Швидко розпочніть роботу з мінімальною конфігурацією. Легко налаштовуйте параметри інтернаціоналізації, маршрутизації, ШІ, збірки та обробки вмісту. - Дослідіть інтеграцію Next.js
	Спрощене отримання вмісту Не потрібно викликати функцію `t` для кожного елемента вмісту. Отримуйте весь вміст безпосередньо за допомогою одного хука. - Інтеграція React
	Узгоджена реалізація Server Component Ідеально підходить для серверних компонентів Next.js, використовуйте ту саму реалізацію для клієнтських і серверних компонентів, не потрібно передавати функцію `t` через кожен серверний компонент. - Server Components
	Організована кодова база Тримайте кодову базу більш організованою: 1 компонент = 1 словник у тій же папці. Переклади поруч із їхніми відповідними компонентами покращують підтримку та чіткість. - Як працює Intlayer
	Покращена маршрутизація Повна підтримка маршрутизації додатків, що плавно адаптується до складних структур додатків для Next.js, React, Vite, Vue.js тощо. - Дослідіть інтеграцію Next.js
	Підтримка Markdown Імпортуйте та інтерпретуйте локальні файли та віддалений Markdown для багатомовного вмісту, такого як політики конфіденційності, документація тощо. Інтерпретуйте та робіть метадані Markdown доступними у вашому коді. - Файли вмісту
	Безкоштовний візуальний редактор та CMS Для авторів вмісту доступний безкоштовний візуальний редактор та CMS, що усуває потребу в платформі локалізації. Синхронізуйте свій вміст за допомогою Git або повністю або частково винесіть його на аутсорс за допомогою CMS. - Редактор Intlayer - Intlayer CMS
	Вміст типу 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 та помилки/попередження під час збірки	⚠️ Переважно рядки відкату (fallback) під час виконання	⚠️ Рядки відкату	⚠️ Потрібна додаткова конфігурація	⚠️ Відкат під час виконання	⚠️ Відкат під час виконання	⚠️ Відкат/попередження під час виконання (можна налаштувати)
Багатий вміст (JSX/Markdown/компоненти)	✅ Пряма підтримка	⚠️ Обмежено / лише інтерполяція	⚠️ Синтаксис ICU, не справжній JSX	⚠️ Обмежено	❌ Не розраховано на багаті вузли	⚠️ Обмежено	⚠️ Обмежено (компоненти через `<i18n-t>`, Markdown через плагіни)
Переклад на основі ШІ	✅ Так, підтримує кількох постачальників ШІ. Можна використовувати з власними ключами API. Враховує контекст додатка та обсяг вмісту	❌ Ні	❌ Ні	❌ Ні	❌ Ні	❌ Ні	❌ Ні
Візуальний редактор	✅ Так, локальний візуальний редактор + опціональна CMS; може виносити вміст кодової бази на аутсорс; вбудовуваний	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації	❌ Ні / доступно через зовнішні платформи локалізації
Локалізована маршрутизація	✅ Так, підтримує локалізовані шляхи "з коробки" (працює з Next.js та Vite)	⚠️ Немає вбудованої, потрібні плагіни (наприклад, `next-i18next`) або власна конфігурація маршрутизатора	❌ Ні, лише форматування повідомлень, маршрутизація має бути ручною	⚠️ Немає вбудованої, потрібні плагіни або ручне налаштування	✅ Вбудовано, App Router підтримує сегмент `[locale]`	✅ Вбудовано	✅ Вбудовано
Динамічне генерування маршрутів	✅ Так	⚠️ Плагін/екосистема або ручне налаштування	❌ Не надається	⚠️ Плагін/вручну	✅ Так	✅ Так	❌ Не надається (надає Nuxt i18n)
Множина	✅ Шаблони на основі перерахувань (enums)	✅ Можна налаштувати (плагіни, такі як i18next-icu)	✅ (ICU)	✅ (ICU/messageformat)	✅ Добре	✅ Добре	✅ Вбудовані правила множини
Форматування (дати, числа, валюти)	✅ Оптимізовані форматувальники (Intl під капотом)	⚠️ Через плагіни або власне використання Intl	✅ Форматувальники ICU	✅ Хелпери ICU/CLI	✅ Добре (хелпери Intl)	✅ Добре (хелпери Intl)	✅ Вбудовані форматувальники дат/чисел (Intl)
Формат вмісту	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml в роботі)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
Підтримка ICU	⚠️ В роботі	⚠️ Через плагін (i18next-icu)	✅ Так	✅ Так	✅ Так	⚠️ Через плагін (`i18next-icu`)	⚠️ Через власний форматувальник/компілятор
Хелпери SEO (hreflang, sitemap)	✅ Вбудовані інструменти: хелпери для sitemap, robots.txt, метаданих	⚠️ Плагіни спільноти / вручну	❌ Не є основним	❌ Не є основним	✅ Добре	✅ Добре	❌ Не є основним (надає хелпери Nuxt i18n)
Екосистема / Спільнота	⚠️ Менша, але швидко зростає та чуйно реагує	✅ Найбільша та зріла	✅ Велика	⚠️ Менша	✅ Середнього розміру, зосереджена на Next.js	✅ Середнього розміру, зосереджена на Next.js	✅ Велика в екосистемі Vue
Server-side Rendering та Server Components	✅ Так, спрощено для SSR / React Server Components	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	⚠️ Підтримується на рівні сторінки з додатковим налаштуванням, але потрібно передавати t-функції вниз по дереву компонентів	✅ Підтримується, потрібне налаштування	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів	✅ SSR через Nuxt/Vue SSR (без RSC)
Tree-shaking (завантаження лише використаного)	✅ Так, для кожного компонента під час збірки через плагіни Babel/SWC	⚠️ Зазвичай завантажує все (можна покращити через простори назв / code-splitting)	⚠️ Зазвичай завантажує все	❌ Не типово	⚠️ Частково	⚠️ Частково	⚠️ Частково (з code-splitting / ручним налаштуванням)
Ледаче завантаження (Lazy loading)	✅ Так, для кожної мови / для кожного словника	✅ Так (наприклад, бекенди/простори назв за запитом)	✅ Так (розділення мовних пакетів)	✅ Так (динамічний імпорт каталогів)	✅ Так (на маршрут / на мову), потрібне управління просторами назв	✅ Так (на маршрут / на мову), потрібне управління просторами назв	✅ Так (асинхронні мовні повідомлення)
Очищення невикористаного вмісту	✅ Так, для кожного словника під час збірки	❌ Ні, лише через ручне розділення просторів назв	❌ Ні, усі оголошені повідомлення пакуються	✅ Так, невикористані ключі виявляються та видаляються при збірці	❌ Ні, можна керувати вручну за допомогою управління просторами назв	❌ Ні, можна керувати вручну за допомогою управління просторами назв	❌ Ні, можливо лише через ручне ледаче завантаження
Управління великими проектами	✅ Заохочує модульність, підходить для дизайн-систем	⚠️ Потрібна хороша дисципліна файлів	⚠️ Центральні каталоги можуть стати великими	⚠️ Може стати складним	✅ Модульно з налаштуванням	✅ Модульно з налаштуванням	✅ Модульно з налаштуванням Vue Router/Nuxt i18n

Зірки на GitHub

Взаємосумісність

intlayer також може допомогти в управлінні просторами назв react-intl, react-i18next, next-intl, next-i18next та vue-i18n.

Почати