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

Что такое Intlayer?

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

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

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

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

.├── locales│   ├── en.json│   ├── fr.json│   └── es.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
   • Не забыть импортировать новое пространство имён на вашей странице
   • Перевести ваш контент (часто выполняется вручную путём копирования/вставки из AI-сервисов)

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|mjs|cjs|json}} можно создавать с помощью расширения для VSCode
   • Инструменты автозаполнения на базе ИИ в вашей IDE (например, GitHub Copilot) могут помочь вам объявлять ваш контент, уменьшая необходимость копирования/вставки

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

   • Снизить сложность
   • Повысить поддерживаемость

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

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

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

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

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

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

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

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

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

История документа