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

Що таке Intlayer?

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

Чому варто обрати Intlayer, а не альтернативи?

Порівняно з основними рішеннями, такими як next-intl або i18next, 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

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

.├── 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. Для кожного нового створеного компонента ви повинні:

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

2. Для будь-яких змін, внесених у ваші компоненти, ви повинні:

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

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

Для вирішення цієї проблеми Intlayer використовує підхід, який обмежує ваш контент на компонент і зберігає ваш контент близько до компонента, як ми часто робимо з CSS (styled-components), типами, документацією (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",
      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. Зменшити витрати обробки для AI агентів при оголошенні вашого багатомовного контенту

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

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

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

Додаткові можливості 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. - Redactor Intlayer - CMS Intlayer
	Вміст, придатний до Tree-shaking Вміст, придатний до tree-shaking, що зменшує розмір остаточного пакету. Завантажує контент для кожного компонента, виключаючи будь-який невикористаний контент з вашого пакету. Підтримує ледачого завантаження для підвищення ефективності завантаження додатку. - Оптимізація збірки додатку
	Статичне рендерування Не блокує статичне рендерування. - Інтеграція Next.js
	Переклад на основі штучного інтелекту Перетворіть ваш веб-сайт на 231 мову одним кліком, використовуючи розширені інструменти перекладу на основі штучного інтелекту Intlayer з вашим власним постачальником штучного інтелекту/ключем API. - Інтеграція CI/CD - CLI Intlayer - Автоматичне заповнення
	Інтеграція MCP Server Надає MCP (Model Context Protocol) сервер для автоматизації IDE, що дозволяє безперешкодне управління контентом та робочі процеси i18n безпосередньо в вашому середовищі розробки. - MCP Server
	Розширення 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 також може допомогти в управлінні просторами назв react-intl, react-i18next, next-intl, next-i18next та vue-i18n.

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