ГлавнаяПесочницаВитринаПриложениеДокументБлог
    • Englishанглийский
      EN
    • русскийрусский
      RU
    • 日本語японский
      JA
    • françaisфранцузский
      FR
    • 한국어корейский
      KO
    • 中文китайский
      ZH
    • españolиспанский
      ES
    • Deutschнемецкий
      DE
    • العربيةарабский
      AR
    • italianoитальянский
      IT
    • British Englishбританский английский
      EN-GB
    • portuguêsпортугальский
      PT
    • हिन्दीхинди
      HI
    • Türkçeтурецкий
      TR
    • polskiпольский
      PL
    • Indonesiaиндонезийский
      ID
    • Tiếng Việtвьетнамский
      VI
    • українськаукраинский
      UK
    /
    Фильтровать документы по фреймворку
    Alt+←
    Почему Intlayer?
    Начать
    Концепция
    • Как работает Intlayer
    • Конфигурация
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Визуальный редактор
    • CMS
    • Интеграция CI/CD
    • ПереводМножественное числоПеречислениеУсловиеПолВставкаФайлВложенностьMarkdownHTMLПолучение функции
    • Файл для каждой локали
    • Компилятор
    • Автозаполнение
    • Тестирование
    • Оптимизация пакета
    Окружающая среда
    • Next.js 14 и App Router
      Next.js 15
      Next.js без locale URL
      Next.js и Page Router
      Compiler
    • Tanstack Start Solid
    • Astro и React
      Astro и Svelte
      Astro и Vue
      Astro и Solid
      Astro и Preact
      Astro и Lit
      Astro и Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt и Vue
    • Vite и Solid
    • SvelteKit
    • Vite и Preact
    • Vite и Vanilla JS
    • Vite и Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native и Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx и React
    Plugins
    • JSON
    • gettext (.po)
    Расширение VS Code
    Агент
    • Сервер MCP
    • Навики агента
    Релизы
    • v8
    • v7
    • v6
    Бенчмарк
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Блог
    Задать вопрос
    1. Documentation
    2. Начать
    Создание:2025-08-23Последнее обновление:2025-08-23
    Ссылайтесь на этот документ на ваш любимый ассистент AI
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

    История версий

    1. "Инициализация истории"
      v5.5.1029.06.2025

    Содержимое этой страницы было переведено с помощью ИИ.

    Смотреть последнюю версию оригинального контента на английском
    Изменить эту документацию

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на документацию GitHub
    Копировать

    Копировать Markdown документа в буфер обмена

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

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

    Введение

    Что такое Intlayer?

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

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

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

    bash
    Копировать код

    Копировать код в буфер обмена

    .└── 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",
        }),
      },
    } 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 предлагает множество функций, адаптированных для современных веб-разработок. Ниже приведены ключевые возможности с ссылками на подробную документацию по каждой из них:

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

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

    Словарь

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

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

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

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

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

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

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

    • Markdown
      Изучите, как использовать Markdown в Intlayer для создания насыщенного контента.

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

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

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

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

    • Intlayer с Next.js 15
    • Intlayer с Next.js 14 (App Router)
    • Intlayer с Next.js Page Router
    • Intlayer с React CRA
    • Intlayer с Vite + React
    • Intlayer с React Native и Expo
    • Intlayer с Lynx и React
    • Intlayer с Express

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

    Вклад и обратная связь

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

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


    Почему Intlayer?
    Как работает Intlayer
    Alt+→

    На этой странице

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

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