Документація 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",
      uk: "Привіт, світе",
    }),
  },
} 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 з Tanstack Start
• Intlayer з Tanstack Start + Solid
• Intlayer з Vite + React
• Intlayer з React Router v7
• Intlayer з React Router v7 (fs-routes)
• Intlayer з React CRA
• Intlayer з React Native та Expo
• Intlayer з Lynx та React
• Intlayer з Astro
• Intlayer з Astro + React
• Intlayer з Astro + Vue
• Intlayer з Astro + Svelte
• Intlayer з Astro + Solid
• Intlayer з Astro + Preact
• Intlayer з Astro + Lit
• Intlayer з Astro + Vanilla JS
• Intlayer з Vite + Vue
• Intlayer з Nuxt
• Intlayer з Vite + Svelte
• Intlayer зі SvelteKit
• Intlayer з Vite + Solid
• Intlayer з SolidStart
• Intlayer з Vite + Preact
• Intlayer з Angular 22
• Intlayer з Angular 19
• Intlayer з Analog
• Intlayer з Vite + Lit
• Intlayer з Vite + Vanilla JS
• Intlayer з Vanilla JS
• Intlayer з htmx
• Intlayer з Express
• Intlayer з NestJS
• Intlayer з Fastify
• Intlayer з Hono
• Intlayer з AdonisJS
• Intlayer з Elysia
• Intlayer з Storybook
• Intlayer з next-intl
• Intlayer з next-i18next

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

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

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

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

Часто задавані запитання