ГоловнаПісочницяВітринаДодатокДокументаціяБлог
    • 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+←
    Що таке міжнароднізація (i18n)?
    SEO та i18n
    Гід
    • i18n з використанням next-i18next
    • i18n з використанням next-intl
    Використовуйте Intlayer на своєму рішенні
    • Автоматизація next-i18next
    • Автоматизація react-i18next
    • Автоматизація next-intl
    • Автоматизація react-intl
    • Автоматизація vue-i18n
    Порівняння
    • next-i18next vs next-intl vs Intlayer
    • react-i18next vs react-intl vs Intlayer
    Документація
    1. Blog
    2. Intlayer with i18next
    Creation:2024-12-24Last update:2025-11-06
    Watch the video tutorial

    This page has a video tutorial available.

    Надішліть цей документ вашому улюбленому AI-асистенту
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту

    Історія версій

    1. Додано підтримку формату i18next
      v7.5.013.12.2025
    2. Додано документацію щодо підтримки AI-провайдера
      v7.0.706.11.2025
    3. Додано плагін loadJSON
      v7.0.601.11.2025
    4. Change to syncJSON plugin
      v7.0.029.10.2025

    Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

    Переглянути останню версію оригінального вмісту англійською
    Edit this doc

    If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

    GitHub link to the documentation
    Copy

    Copy doc Markdown to clipboard

    Як автоматизувати ваші JSON-переклади i18next за допомогою Intlayer

    www.youtube.com

    Зміст

    Що таке Intlayer?

    Intlayer, інноваційна open-source бібліотека для інтернаціоналізації, створена для вирішення недоліків традиційних i18n-рішень. Вона пропонує сучасний підхід до керування контентом у JavaScript-додатках.

    Дивіться конкретне порівняння з i18next у нашому дописі в блозі «next-i18next vs. next-intl vs. Intlayer»: /uk/blog/next-i18next-vs-next-intl-vs-intlayer

    Чому поєднувати Intlayer з i18next?

    Хоча Intlayer пропонує відмінне автономне i18n-рішення (див. наш посібник з інтеграції Next.js: /uk/doc/environment/nextjs), ви можете захотіти поєднати його з i18next з кількох причин.

    Intlayer пропонує широкий набір розширених функцій, що виходять за межі традиційних i18n-інструментів. Він допомагає вам:

    • Автоматично виявляти та заповнювати відсутні переклади, щоб спростити локалізацію.
    • Тестувати та перевіряти ваші переклади безпосередньо у ваших робочих процесах розробки або CI/CD.
    • Керувати контентом на рівні компонентів, що дозволяє отримати чисту, масштабовану та легку в підтримці структуру в усьому вашому додатку.
    • Виносити контент за межі коду, роблячи його простим для редагування всією вашою командою (розробники, перекладачі та контент-менеджери).

    Однак, i18next залишається відмінним і широко застосовуваним рішенням для i18n завдяки своїй дозрілій екосистемі, широкій підтримці спільноти та широкій сумісності з плагінами.

    Поєднавши Intlayer з i18next, ви отримуєте найкраще з обох світів, стабільність і зрілість екосистеми i18next разом із сучасним керуванням контентом, автоматизацією та покращенням developer experience від Intlayer.

    Цей посібник пояснює, як використовувати Intlayer як адаптер для i18next, що дозволяє вам:

    • Поступово мігрувати з i18next на Intlayer.
    • Зберігайте існуючі плагіни та робочі процеси i18next.
    • Автоматизуйте ваші JSON-переклади у CLI або в CI/CD конвеєрах.
    • Тестуйте, синхронізуйте та керуйте перекладами ефективніше.

    Зміст

    Покроковий посібник із налаштування Intlayer з i18next

    Крок 1: Встановлення залежностей

    Встановіть необхідні пакети:

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

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

    npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

    Опис пакетів:

    • intlayer: Базова бібліотека для управління інтернаціоналізацією, декларації контенту та побудови
    • @intlayer/sync-json-plugin: Плагін для експорту декларацій контенту Intlayer у формат JSON, сумісний з i18next

    Крок 2: Реалізуйте плагін Intlayer для обгортання JSON

    Створіть файл конфігурації Intlayer, щоб визначити підтримувані локалі:

    Якщо ви також хочете експортувати JSON-словники для i18next, додайте плагін syncJSON:

    intlayer.config.ts
    Копіювати код

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

    import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,    }),  ],};export default config;

    Плагін syncJSON автоматично обгортає JSON. Він читає та записує JSON-файли, не змінюючи архітектуру їхнього вмісту.

    Якщо ви хочете, щоб ці JSON-файли співіснували з файлами декларацій контенту Intlayer (.content файли), Intlayer оброблятиме їх таким чином:

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

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

    1. завантажить як JSON, так і файли декларацій контенту і перетворить їх на словник Intlayer.2. якщо виникають конфлікти між JSON та файлами декларацій контенту, Intlayer виконає злиття всіх словників. Результат залежатиме від пріоритету плагінів і пріоритету файлів декларацій контенту (усі параметри можна налаштувати).

    Якщо зміни вносяться за допомогою CLI для перекладу JSON або через CMS, Intlayer оновить JSON-файл з новими перекладами.

    Щоб дізнатися більше про плагін syncJSON, див. документацію плагіна syncJSON.

    Крок 4: Налаштування AI-провайдера

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

    • Автоматичне виявлення та заповнення відсутніх перекладів: Intlayer сканує ваші JSON-словники, знаходить неперекладені або відсутні ключі і перекладає лише їх, тож 99% вашого JSON залишається незмінним.
    • Поблочний переклад великих JSON-файлів: Коли ваші файли перекладу дуже великі, Intlayer автоматично розбиває обробку на керовані блоки, перекладаючи їх незалежно, щоб уникнути обмежень API та проблем з пам’яттю.
    • Паралелізація просторів імен (namespaces): Якщо у вас сотні просторів імен (або файлів), Intlayer паралелізує задачі перекладу, ефективно прискорюючи ваші CI/CD або масові операції перекладу.
    • Гнучка підтримка AI-провайдерів: Обирайте улюбленого AI-провайдера (наприклад, OpenAI, Claude, Gemini), просто налаштувавши облікові дані. Використовуйте власний API-ключ і за потреби перемикайте провайдерів.
    • Стійка обробка відповідей AI: Intlayer може обробляти крайові випадки, коли ваш AI-провайдер повертає текст або як рядок, або як об’єкт, навіть автоматично повторюючи спроби, якщо формат є непослідовним.
    • Готовий для CLI та CI/CD: запускайте перевірки Intlayer і автозаповнення безпосередньо у ваших тестах або пайплайнах, роблячи процес локалізації надійним та автоматизованим.
    • Інтегрується поверх наявної конфігурації: вам не потрібно змінювати i18next або основу Next.js. Intlayer працює як додатковий плагін до вашої поточної установки, надаючи всі ці переваги з мінімальною міграцією.

    Ось приклад того, як налаштувати AI-провайдера:

    intlayer.config.ts
    Копіювати код

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

    import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  ai: {    provider: "openai",    model: "gpt-5-mini",    apiKey: process.env.OPENAI_API_KEY,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,    }),  ],};export default config;

    Потім ви можете виконати наступну команду, щоб заповнити переклади:

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

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

    npx intlayer fill

    Це заповнить ваші переклади за допомогою AI-провайдера, якого ви налаштували.

    Перегляньте всіх доступних AI-провайдерів у документації з конфігурації Intlayer AI. Перегляньте всі доступні команди в документації Intlayer CLI.


    Налаштування Git

    Рекомендується ігнорувати автоматично згенеровані файли Intlayer:

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

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

    # Ігнорувати файли, згенеровані Intlayer.intlayer

    Ці файли можуть бути повторно згенеровані під час збірки і їх не потрібно додавати до системи контролю версій.

    Розширення для VS Code

    Для покращення досвіду розробника встановіть офіційне Intlayer VS Code Extension:

    Встановити з VS Code Marketplace

    Що таке міжнароднізація (i18n)?
    Alt+→

    На цій сторінці

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

      npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init
      import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,    }),  ],};export default config;
      1. завантажить як JSON, так і файли декларацій контенту і перетворить їх на словник Intlayer.2. якщо виникають конфлікти між JSON та файлами декларацій контенту, Intlayer виконає злиття всіх словників. Результат залежатиме від пріоритету плагінів і пріоритету файлів декларацій контенту (усі параметри можна налаштувати).
      import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  ai: {    provider: "openai",    model: "gpt-5-mini",    apiKey: process.env.OPENAI_API_KEY,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,    }),  ],};export default config;
      npx intlayer fill
      # Ігнорувати файли, згенеровані Intlayer.intlayer