Документация Intlayer

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

Введение

Что такое Intlayer?

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

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

Пример использования

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

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

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

export default componentContent;

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 — это решение, в котором изначально присутствуют интегрированные оптимизации, такие как:

Основные возможности

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

• Поддержка интернационализации: Увеличьте глобальный охват вашего приложения с помощью встроенной поддержки интернационализации.
• Визуальный редактор: Улучшите свой рабочий процесс разработки с помощью плагинов редактора, разработанных для Intlayer. Ознакомьтесь с Руководством по визуальному редактору.
• Гибкость конфигурации: Настройте свою среду с помощью широких возможностей конфигурации, подробно описанных в Руководстве по настройке.
• Продвинутые CLI-инструменты: Эффективно управляйте своими проектами с помощью интерфейса командной строки Intlayer. Изучите возможности в Документации по инструментам CLI.

Основные концепции

Словарь (Dictionary)

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

• Начало работы
  Изучите основы объявления вашего контента в Intlayer.

• Перевод (Translation)
  Поймите, как переводы генерируются, хранятся и используются в вашем приложении.

• Перечисление (Enumeration)
  Легко управляйте повторяющимися или фиксированными наборами данных на разных языках.

• Условие (Condition)
  Узнайте, как использовать условную логику в Intlayer для создания динамического контента.

• Вставка (Insertion)
  Узнайте, как вставлять значения в строку с помощью плейсхолдеров (маркеров вставки).

• Получение с помощью функций (Function Fetching)
  Посмотрите, как динамически получать контент с помощью пользовательской логики, чтобы соответствовать рабочему процессу вашего проекта.

• Markdown
  Узнайте, как использовать Markdown в Intlayer для создания богатого контента.

• Встраивание файлов (File embeddings)
  Узнайте, как встраивать внешние файлы в Intlayer для их использования в редакторе контента.

• Вложенность (Nesting)
  Поймите, как вкладывать контент в Intlayer для создания сложных структур.

Окружения и интеграции

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

• Intlayer с Next.js 16
• Intlayer с Next.js 15
• Intlayer с Next.js 14 (App Router)
• Intlayer с Next.js Page Router
• Intlayer с React CRA
• Intlayer с Vite + React
• Intlayer с React Router v7
• Intlayer с Tanstack Start
• Intlayer с React Native и Expo
• Intlayer с Lynx и React
• Intlayer с Vite + Preact
• Intlayer с Vite + Vue
• Intlayer с Nuxt
• Intlayer с Vite + Svelte
• Intlayer с SvelteKit
• Intlayer с Express
• Intlayer с NestJS
• Intlayer с Hono
• Intlayer с Angular

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

Участие в разработке и отзывы

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

Готовы переводить свое приложение быстрее и эффективнее? Погрузитесь в нашу документацию, чтобы начать использовать Intlayer уже сегодня. Испытайте надежный и оптимизированный подход к интернационализации, который обеспечивает организованность вашего контента и повышает продуктивность вашей команды.

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