Чому варто розглянути Intlayer?

Що таке Intlayer?

Intlayer — це бібліотека інтернаціоналізації, спеціально розроблена для JavaScript-розробників. Вона дозволяє декларувати ваш контент у будь-якому місці коду. Вона перетворює декларації багатомовного контенту на структуровані словники для легкої інтеграції у ваш код. Використовуючи TypeScript, Intlayer робить вашу розробку більш надійною та ефективною.

Чому було створено Intlayer?

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

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

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

Або тут з використанням namespace:

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

Такий тип архітектури уповільнює процес розробки й ускладнює підтримку codebase з кількох причин:

1. Для будь-якого нового створеного компонента ви повинні:

   • Створити новий ресурс/namespace у папці locales
   • Не забути імпортувати новий namespace на вашій сторінці
   • Перекласти ваш контент (часто робиться вручну шляхом копіювання/вставки з AI-провайдерів)

2. При будь-якій зміні ваших компонентів ви повинні:

   • Знайти відповідний ресурс/namespace (розташований далеко від компонента)
   • Перекласти ваш контент
   • Переконатися, що ваш контент актуальний для кожної локалі
   • Перевірити, що у вашому namespace немає невикористаних ключів/значень
   • Переконатися, що структура ваших JSON-файлів однакова для всіх локалей

У професійних проєктах, які використовують такі рішення, часто застосовують платформи локалізації для управління перекладами контенту. Однак для великих проєктів це може швидко стати дорогим.

Щоб вирішити цю проблему, Intlayer застосовує підхід, який розподіляє контент на рівні компонентів і тримає його поруч із компонентом, як ми зазвичай робимо з CSS (styled-components), types, документацією (storybook) або unit-тестами (jest).

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

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      uk: "Привіт, світ",      en: "Hello World",      uk: "Привіт, світ",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

Цей підхід дозволяє вам:

1. Збільшити швидкість розробки

   • Файли .content.{{ts|mjs|cjs|json}} можна створювати за допомогою розширення VSCode
   • Інструменти автозаповнення на базі AI у вашому IDE (наприклад, GitHub Copilot) можуть допомогти оголошувати ваш контент, зменшуючи копіювання/вставлення

2. Очистити ваш codebase

   • Зменшити складність
   • Підвищити підтримуваність

3. Легше дублювати ваші компоненти та пов’язаний контент (наприклад: компоненти входу/реєстрації тощо)

   • Обмежуючи ризик впливу на контент інших компонентів
   • Шляхом копіювання/вставлення вашого контенту з одного застосунку в інший без зовнішніх залежностей

4. Уникнення засмічення вашої codebase непотрібними ключами/значеннями для невикористовуваних компонентів

   • Якщо ви не використовуєте компонент, Intlayer не імпортує пов'язаний з ним контент
   • Якщо ви видалите компонент, вам буде простіше не забути видалити пов'язаний контент, оскільки він знаходитиметься в тій самій папці

5. Знизити навантаження на агентів ШІ при формуванні вашого багатомовного контенту

   • Агенту ШІ не потрібно сканувати всю codebase, щоб дізнатися, де реалізувати ваш контент
   • Переклади можна легко виконати за допомогою інструментів автозаповнення на основі ШІ у вашому IDE (наприклад, GitHub Copilot)

6. Оптимізація продуктивності завантаження

   • Якщо компонент завантажується ліниво (lazy-loaded), пов'язаний з ним контент буде завантажено одночасно

Додаткові можливості Intlayer

Особливість	Опис
	Підтримка різних фреймворків Intlayer сумісний з усіма основними фреймворками та бібліотеками, включаючи Next.js, React, Vite, Vue.js, Nuxt, Preact, Express та інші.
	Керування контентом на основі JavaScript Використовуйте гнучкість JavaScript, щоб ефективно визначати й керувати контентом. - Оголошення контенту
	Компілятор Компілятор Intlayer автоматично витягує вміст із компонентів і генерує файли словників. - Компілятор
	Файл оголошення вмісту для кожної локалі Прискоріть розробку, оголошуючи вміст один раз перед автогенерацією. - Файл оголошення вмісту для кожної локалі
	Типобезпечне середовище Використовуйте TypeScript, щоб гарантувати, що ваші визначення контенту та код позбавлені помилок, а також отримати автодоповнення в IDE. - Налаштування TypeScript
	Спрощене налаштування Швидко почніть роботу з мінімальною конфігурацією. Легко налаштовуйте параметри інтернаціоналізації, маршрутизації, AI, build та обробки контенту. - Дізнайтеся про інтеграцію з Next.js
	Спрощене отримання контенту Немає потреби викликати вашу функцію t для кожного елемента контенту. Отримуйте весь контент безпосередньо, використовуючи один хук. - Інтеграція з React
	Послідовна реалізація серверних компонентів Ідеально підходить для Server Components у Next.js: використовуйте одну й ту саму реалізацію як для клієнтських, так і для серверних компонентів — немає потреби передавати функцію t через кожен серверний компонент. - Server Components
	Організована кодова база Тримайте вашу кодову базу більш організованою: 1 компонент = 1 словник у тій же папці. Переклади, розташовані поруч із відповідними компонентами, покращують підтримку та зрозумілість. - Як працює Intlayer
	Покращена маршрутизація Повна підтримка маршрутизації додатка, що плавно адаптується до складних структур застосунків — для Next.js, React, Vite, Vue.js тощо. - Дізнатися про інтеграцію з Next.js
	Підтримка Markdown Імпортуйте та інтерпретуйте файли локалей і віддалені Markdown-файли для багатомовного контенту, такого як політики конфіденційності, документація тощо. Інтерпретуйте та зробіть метадані Markdown доступними у вашому коді. - Файли контенту
	Безкоштовний візуальний редактор і CMS Для авторів контенту доступні безкоштовний візуальний редактор та CMS, що усуває потребу в платформі локалізації. Підтримуйте синхронізацію контенту через Git або зовнішньо розміщуйте його повністю чи частково через CMS. - Intlayer Editor - Intlayer CMS
	Tree-shakable контент Tree-shakable контент, що зменшує розмір фінального бандла. Завантажує контент на рівні компонентів, виключаючи будь-який невикористаний контент з вашого бандла. Підтримує lazy loading для підвищення ефективності завантаження додатка. - Оптимізація збірки додатка
	Статичний рендеринг Не блокує статичний рендеринг. - Інтеграція з Next.js
	Переклад із підтримкою AI Перетворіть свій вебсайт на 231 мову всього за один клік, використовуючи передові інструменти перекладу Intlayer на базі AI з вашим власним AI-провайдером/ключем 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 з іншими рішеннями

Зірки GitHub

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

Інтероперабельність

intlayer також може допомогти керувати вашими namespaces для react-intl, react-i18next, next-intl, next-i18next та vue-i18n.

За допомогою intlayer ви можете оголосити ваш контент у форматі улюбленої i18n-бібліотеки, і intlayer згенерує ваші простори імен у вибраному вами місці (наприклад: /messages/{{locale}}/{{namespace}}.json).

Зверніться до dictionaryOutput та i18nextResourcesDir опцій для детальнішої інформації.