Ласкаво просимо до офіційної документації Intlayer! Тут ви знайдете все необхідне для інтеграції, налаштування та освоєння Intlayer для всіх ваших завдань з інтернаціоналізації (i18n), незалежно від того, чи працюєте ви з Next.js, React, Vite, Express або в іншому середовищі JavaScript.

Вступ

Що таке Intlayer?

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

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

Приклад використання

bash

Копіювати код

Скопіюйте код у буфер обміну

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

src/components/MyComponent/index.content.ts

Копіювати код

Скопіюйте код у буфер обміну

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      uk: "Привіт, світе",
    }),
  },
} satisfies Dictionary;

export default componentContent;

src/components/MyComponent/index.tsx

Копіювати код

Скопіюйте код у буфер обміну

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

Чому Intlayer краще за альтернативи?

Порівняно з основними рішеннями, такими як next-intl або i18next, Intlayer — це рішення, у якому початково присутні інтегровані оптимізації, такі як:

Замість того, щоб завантажувати масивні JSON-файли на свої сторінки, завантажуйте лише необхідний контент. Intlayer допомагає скоротити розмір ваших збірок і сторінок до 50%.

Локалізація контенту поруч із компонентами вашого додатка полегшує обслуговування великомасштабних додатків. Ви можете дублювати або видалити папку окремої функції без необхідності перевіряти всю кодову базу контенту. Крім того, Intlayer є повністю типізованим (fully typed), щоб гарантувати точність вашого контенту.

Спільне розміщення контенту скорочує контекст, необхідний для великих мовних моделей (LLMs). Intlayer також постачається з набором інструментів, таких як CLI для перевірки відсутніх перекладів, LSP, MCP та навички для агентів (agent skills), щоб зробити процес розробки (DX) ще більш плавним для ШІ-агентів.

Використовуйте автоматизацію для перекладу у вашому CI/CD конвеєрі за допомогою обраної вами LLM за вартістю вашого провайдера ШІ. Intlayer також пропонує компілятор (compiler) для автоматизації вилучення контенту, а також веб-платформу, щоб допомогти перекладати у фоновому режимі.

Підключення масивних JSON-файлів до компонентів може призвести до проблем із продуктивністю та реактивністю. Intlayer оптимізує завантаження вашого контенту під час збірки (build time).

Intlayer — це більше, ніж просто i18n-рішення. Він надає візуальний редактор (visual editor), який можна розгорнути самостійно (self-hosted), та повноцінну CMS, щоб допомогти вам управляти вашим багатомовним контентом у реальному часі, роблячи співпрацю з перекладачами, копірайтерами та іншими членами команди безшовною. Контент може зберігатися локально та/або віддалено.

Основні можливості

Intlayer пропонує безліч функцій, адаптованих до потреб сучасної веб-розробки. Нижче наведено ключові функції з посиланнями на детальну документацію для кожної з них:

Підтримка інтернаціоналізації: Збільште глобальне охоплення вашого додатка за допомогою вбудованої підтримки інтернаціоналізації.
Візуальний редактор: Покращуйте свій робочий процес розробки за допомогою плагінів редактора, створених для Intlayer. Ознайомтеся з Посібником з візуального редактора.
Гнучкість налаштування: Налаштуйте своє середовище за допомогою широких можливостей конфігурації, детально описаних у Посібнику з налаштування.
Просунуті інструменти CLI: Ефективно керуйте своїми проектами за допомогою інтерфейсу командного рядка Intlayer. Досліджуйте можливості у Документації з інструментів CLI.

Основні концепції

Словник (Dictionary)

Організовуйте свій багатомовний контент поруч із кодом, щоб все було узгоджено та зручно для обслуговування.

Початок роботи
Вивчіть основи оголошення вашого контенту в Intlayer.
Переклад (Translation)
Зрозумійте, як переклади генеруються, зберігаються та використовуються у вашому додатку.
Перелік (Enumeration)
Легко керуйте повторюваними або фіксованими наборами даних різними мовами.
Умова (Condition)
Дізнайтеся, як використовувати умовну логіку в Intlayer для створення динамічного контенту.
Вставка (Insertion)
Дізнайтеся, як вставляти значення в рядок за допомогою плейсхолдерів (маркерів вставки).
Отримання за допомогою функцій (Function Fetching)
Подивіться, як динамічно отримувати контент за допомогою користувацької логіки, щоб відповідати робочому процесу вашого проекту.
Markdown
Дізнайтеся, як використовувати Markdown у Intlayer для створення багатого контенту.
Вбудовування файлів (File embeddings)
Дізнайтеся, як вбудовувати зовнішні файли в Intlayer для їх використання в редакторі контенту.
Вкладеність (Nesting)
Зрозумійте, як вкладати контент у Intlayer для створення складних структур.

Середовища та інтеграції

Ми створили Intlayer з урахуванням гнучкості, забезпечивши безшовну інтеграцію у популярні фреймворки та інструменти збірки:

Кожен посібник з інтеграції містить найкращі практики використання функцій Intlayer, такі як рендеринг на стороні сервера (SSR), динамічна маршрутизація або рендеринг на стороні клієнта, щоб ви могли підтримувати швидкий, SEO-дружній і високомасштабований додаток.

Участь у розробці та відгуки

Ми цінуємо силу open-source та розробки, керованої спільнотою. Якщо ви хочете запропонувати покращення, додати новий посібник або виправити будь-які проблеми у нашій документації, сміливо надсилайте Pull Request або відкривайте Issue у нашому репозиторії на GitHub.

Готові перекладати свій додаток швидше та ефективніше? Зануртеся в нашу документацію, щоб почати використовувати Intlayer вже сьогодні. Відчуйте надійний і оптимізований підхід до інтернаціоналізації, який забезпечує організованість вашого контенту та підвищує продуктивність вашої команди.

Чому Intlayer?

Як працює Intlayer