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

Что такое Intlayer?

Intlayer — это библиотека интернационализации (i18n), разработанная специально для 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

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

1. Для каждого нового созданного компонента вам необходимо:

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

2. При любом изменении ваших компонентов вам необходимо:

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

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

Чтобы решить эту проблему, Intlayer использует подход, который изолирует ваш контент в рамках каждого компонента и держит ваш контент близко к нему, как мы часто делаем с CSS (styled-components), типами, документацией (storybook) или модульными тестами (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({
      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|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml} могут быть созданы с помощью расширения для VSCode
   • Инструменты автодополнения с ИИ в вашей IDE (такие как GitHub Copilot) могут помочь вам объявлять контент, сокращая ручное копирование и вставку

2. Очистить вашу кодовую базу

   • Уменьшить сложность
   • Повысить удобство поддержки

3. Легче дублировать ваши компоненты и связанный с ними контент (Пример: компоненты входа/регистрации и т. д.)

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

4. Избежать захламления кодовой базы неиспользуемыми ключами/значениями для неиспользуемых компонентов

   • Если вы не используете компонент, Intlayer не будет импортировать связанный с ним контент
   • Если вы удалите компонент, вы легче вспомните о необходимости удалить связанный с ним контент, так как он будет находиться в той же папке

5. Снизить когнитивную нагрузку на ИИ-агентов для объявления многоязычного контента

   • ИИ-агенту не придется сканировать всю кодовую базу, чтобы понять, куда внедрить ваш контент
   • Переводы могут легко выполняться инструментами автодополнения с ИИ в вашей IDE (такими как GitHub Copilot)

6. Оптимизировать производительность загрузки

   • Если компонент загружается лениво (lazy-loaded), связанный с ним контент будет загружен в то же время

Дополнительные возможности 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-shaking Контент с поддержкой оптимизации tree-shaking, сокращающий размер финальной сборки. Загружает контент для каждого компонента, исключая любой неиспользуемый контент из вашей сборки. Поддерживает ленивую загрузку для повышения эффективности запуска приложения. - Оптимизация сборки приложения
	Статический рендеринг Не блокирует статический рендеринг. - Интеграция с 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 - Адаптеры совместимости Intlayer
Тестирование отсутствующих переводов (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).

Если вы хотите продолжать использовать API вашей текущей библиотеки i18n, intlayer также предоставляет адаптеры совместимости (compat adapters): пакеты, предоставляющие точно такой же API, как react-i18next, next-intl, react-intl, vue-i18n и другие, но с содержимым из словарей Intlayer. Это позволяет мигрировать постепенно, не переписывая код. См. документацию по адаптерам совместимости.

Часто задаваемые вопросы