Перейти до вмісту
Proyecta Docs

Інтернаціоналізація

Додайте підтримку кількох мов у свій застосунок. Використовуйте Proyecta Content API для локалізації редакційного контенту або попросіть AI підключити i18n-фреймворк безпосередньо в коді.

Proyecta підтримує два взаємодоповнювальні підходи до інтернаціоналізації застосунків, які ти створюєш:

  1. Локалізація контенту через Proyecta Content API — для редакційного контенту (блог-пости, FAQ, маркетингові тексти), який потрібно перекласти кількома мовами
  2. i18n на рівні коду за допомогою фреймворку перекладів — для рядків інтерфейсу, дат, валют і перемикання локалі під час роботи застосунку

Обидва підходи доступні вже зараз. Який із них потрібен тобі — залежить від того, що саме ти перекладаєш.

Сам builder Proyecta постачається з підтримкою 24 локалей, тож продукт відмінно розуміється на i18n. Ті самі підходи застосовуються до застосунків, які ти створюєш усередині нього.

Варіант 1: Локалізація контенту (Proyecta Content API)

Section titled “Варіант 1: Локалізація контенту (Proyecta Content API)”

Якщо ти розробляєш контентно-насичений сайт — блог, базу знань, маркетингові сторінки, каталог товарів — використовуй вбудовану підтримку локалей у Content API.

// Create the locales you support
await proyecta.content.locales.create({
    /* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
    /* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
    /* code: 'fr', name: 'Français' */
});


// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

Цей підхід підходить, коли:

  • Редактори без технічних навичок мають перекладати контент
  • Потрібно, щоб переклади зберігалися у версіях
  • Потрібна локале-специфічна публікація (запланована публікація з’явиться незабаром — наразі записи потребують ручної публікації через API)

Повний опис Content API — у розділі Управління контентом.

Варіант 2: i18n-фреймворк на рівні коду

Section titled “Варіант 2: i18n-фреймворк на рівні коду”

Для рядків інтерфейсу — підписів, кнопок, повідомлень про помилки, дат, валют — попроси AI підключити i18n-фреймворк безпосередньо до твого проєкту:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI виконає наступне:

  1. Обере фреймворк — AI використовує i18next разом із react-i18next (стандарт Proyecta)
  2. Створить файли каталогів у src/locales/ (один JSON на мову)
  3. Обгорне текст у виклики t() (з хука useTranslation із react-i18next)
  4. Додасть компонент перемикача мов
  5. Налаштує URL-маршрутизацію з префіксами локалей
  6. Обробить RTL-макети (dir="rtl") для арабської, іврит тощо
  7. Форматуватиме числа, дати та валюти відповідно до локалі

Автопереклад за допомогою AI

Section titled “Автопереклад за допомогою AI”

Щойно базова мова готова, AI чудово справляється зі створенням файлів інших каталогів:

  • "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
  • "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Для критично важливого контенту (юридичні тексти, медична або фінансова тематика) перед публікацією варто залучити людину-перекладача для перевірки результатів AI.

Поєднання обох підходів

Section titled “Поєднання обох підходів”

Більшість реальних застосунків використовують обидва підходи: i18n на рівні коду — для елементів інтерфейсу (кнопки, помилки, навігація), а Content API — для редакційного контенту (статті, описи товарів). Вони чудово співіснують — твій i18n-фреймворк обробляє файли каталогів під час build, а Content API видає локалізовані записи під час роботи застосунку.

Найкращі практики

Section titled “Найкращі практики”
  1. Спочатку обери базову мову та зафіналізуй тексти. Перекладати мінливий контент — справжній біль.
  2. Перекладай пакетами. Не перекладай по ходу — дочекайся, поки функціональність стабілізується.
  3. Тестуй RTL завчасно, якщо підтримуєш арабську або іврит. Помилки RTL виявляються лише тоді, коли на них дивишся.
  4. Додавай lang і dir до <html>. Від цього залежать браузери та програми екранного доступу.
  5. Використовуй Intl для форматування. Не пиши власне форматування дат і валют — використовуй Intl.DateTimeFormat, Intl.NumberFormat.

Незабаром

Section titled “Незабаром”
  • UI управління локалями в builder — обирай локалі, переглядай охоплення перекладів, редагуй каталоги, не виходячи з Proyecta
  • Автопереклад під час збереження для нових рядків
  • Шаблони проєктів із готовим i18n із попередньо підключеним фреймворком