Internationalization

*Слідкуйте за подальшим розширенням цього розділу в майбутньому. Наведені нижче інструкції можуть бути застарілими, тому, будь ласка, перевірте їх! Ми повністю оновимо цей README.md з випуском Relivator 1.3.0.. Багатомовність у баченні Bleverse Reliverse цінується. Ми обожнюємо обговорювати її і плануємо заглибитися в тему інтернаціоналізації Next.js 15 App Router в майбутніх статтях. Наразі всі мови перекладені машинним перекладом. В майбутньому планується доопрацювання носіями мови. useTranslations працює як на сервері, так і на клієнті; нам потрібен тільки getTranslations на асинхронних компонентах. *Використовуйте bun lint:i18n для перевірки файлів i18n. Інструмент намагається виправити проблеми, коли це можливо, пропонуючи такі можливості, як сортування за зростанням. Відсутність результатів означає, що все в порядку. Для інтернаціоналізації ми використовуємо next-intl. Іноді ми можемо використовувати бета/rc-версії, якщо це необхідно. Більш детальну інформацію про це можна знайти тут і тут.

Як додати нову мову

Описаний нижче процес буде спрощено та автоматизовано в майбутньому. Будь ласка, повідомте нам, якщо у вас виникнуть додаткові запитання щодо поточного процесу додавання мов.

Нам знадобиться i18n код (у форматі «мова-країна»; одного лише коду мови достатньо, але це не є оптимальним для SEO). Для прикладу візьмемо китайську мову, для якої, як я знаю, використовуються коди zh-cn/zh-tw/zh-hk.
Відкриваємо папку messages і створюємо файл zh-cn.json з прикладом вмісту: { «metadata»: { «description»: «建立更高效、更吸引人且更有利可图的在线商店：使用 Relivator» } }.
Тепер відкрийте файл src/i18n.ts і додайте «zh-cn»: zh_cn з відповідним імпортом вгорі.
У файлі src/navigation.ts додайте відповідні значення до locales та labels.
Запустіть bun run dev і перегляньте заголовок цільової сторінки. Якщо він відображається правильно, ви готові до роботи.
Як варіант, я рекомендую використовувати розширення VSCode i18n Ally, яке полегшує машинний переклад.
Також за бажанням встановіть певну мову CSpell для повної підтримки цієї мови у VSCode (при використанні розширення «Code Spell Checker»). Якщо мова недоступна, спробуйте знайти файл словника слів в Інтернеті або створити новий (див. документацію CSpell). До речі, якщо прапор країни не відображається: відкрийте src/localization-main.tsx, перейдіть до LocaleFlagIcon і додайте else if. Будь ласка, відвідайте веб-сайт бібліотеки піктограм прапорів, щоб переглянути код відсутньої піктограми. Приклад для zh-cn буде таким: } else if (baseLocale === «zh») { return <span aria-hidden=«true» className=«fi fi-cn mr-2» />; } Зверніть увагу, що як розширення VSCode «i18n Ally», так і ручні системи на кшталт «Google Translate» можуть неправильно перекладати змінні. Якщо ви зіткнулися з такою помилкою: Оригінальне повідомлення: ‘Змінна контексту intl-рядка «类别» не була надана рядку «购买最好的{类别}»’. Ця помилка виникає через те, що у нас є {类别}, а має бути {category}. Щоб перевірити правильну змінну, зверніться до файлу en-us.json.Звичайно! Отже, правильною версією для цього конкретного випадку буде

{
  «categories": {
    «buyFromCategories": «从最好的商店购买 {категорія}»,
    «buyProducts": «购买 ${категорія} 类别的产品»,
    «buyTheBest": «购买最好的 {category}»
  }
}

Підтримувані на даний момент локалі (можна додати власні вручну):

de, en, es, ms, fr, hi, it, pl, tr, uk, zh.
de-DE, en-US, es-ES, ms-MY, fr-FR, hi-IN, it-IT, pl-PL, tr-TR, uk-UA, zh-CN.