Від нуля до i18n: Додавання підтримки кількох мов до worklenz

Підтримка кількох мов є важливою функцією для будь-якого сучасного додатку, який прагне охопити глобальну аудиторію. У цій статті ми розповімо, як ми додали підтримку кількох мов у worklenz за допомогою react-i18next, вирішуючи поширені проблеми та забезпечуючи масштабовану реалізацію з прикладами.

Початкова настройка з react-i18next

Для початку ми інтегрували react-i18next у наш React-проєкт. Ця бібліотека є популярним вибором для інтернаціоналізації (i18n) в React завдяки своїй гнучкості та простоті використання. Ось як ми налаштували початкову конфігурацію:

Інсталяція

npm install i18next react-i18next i18next-http-backend

Ініціалізація i18n

У нашому файлі i18n.js ми налаштували i18next, щоб завантажувати переклади з JSON-файлів для кожного компоненту.

import i18n from 'i18next';  
import { initReactI18next } from 'react-i18next';  
import HttpApi from 'i18next-http-backend';  

i18n  
 .use(HttpApi)  
 .use(initReactI18next)  
 .init({  
 fallbackLng: 'en',  
 backend: {  
 loadPath: '/locales/{{lng}}/{{ns}}.json',  
 },  
 defaultNS: 'common',  
 interpolation: {  
 escapeValue: false,  
 },  
 });  

export default i18n;

Додавання файлів перекладу

Спочатку всі переклади зберігалися в одному JSON-файлі під public/locales/en/translation.json.

{  
 "welcome": "Welcome to Worklenz",  
 "login": "Login"  
}

Використання перекладів у компонентах

За допомогою useTranslation з react-i18next, ми додали переклади до наших компонентів.

import { useTranslation } from 'react-i18next';  

function Welcome() {  
 const { t } = useTranslation();  
 return 
{t('welcome')}
;  
}  

Організація файлів перекладу

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

Директорії для мов

Ми створили окремі директорії для кожної мови, наприклад, locales/en та locales/es.

Файли для компонентів

Переклади для кожного компонента були переміщені у власні JSON-файли. Наприклад, для компонентів аутентифікації ми створили окремі файли, такі як:

• locales/en/login.json
• locales/en/signup.json
• locales/en/forgotPassword.json

У компонентах вказувалися простори імен, і кожен компонент отримував доступ до свого специфічного файлу. Наприклад, компонент Login використовував файл login.json.

import { useTranslation } from 'react-i18next';  

function Login() {  
 const { t } = useTranslation('login');  
 return {t('loginButton')};  
}  

Файл login.json може виглядати так:

{  
 "loginButton": "Log In",  
 "forgotPassword": "Forgot your password?"  
}

Аналогічно, компонент Signup використовував би signup.json.

import { useTranslation } from 'react-i18next';  

function Signup() {  
 const { t } = useTranslation('signup');  
 return 
{t('signupTitle')}
;  
}  

А файл signup.json може виглядати так:

{  
 "signupTitle": "Create an Account",  
 "signupButton": "Sign Up"  
}

Управління динамічним контентом

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

{  
 "greeting": "Hello, {{name}}!"  
}

const { t } = useTranslation();  
return 
{t('greeting', { name: userName })}
;  

Проблеми з форматуванням дат і чисел

Дати та числа часто вимагають локалізації.
Оскільки react-i18next безпосередньо не обробляє форматування, ми використовували API Intl для цієї мети.

const formattedDate = new Intl.DateTimeFormat(i18n.language, {  
 year: 'numeric',  
 month: 'long',  
 day: 'numeric',  
}).format(new Date());

Ми обгорнули цю логіку в утилітну функцію для повторного використання по всьому додатку.

Висновок

Додавання підтримки кількох мов до worklenz перетворило його на більш інклюзивну та зручну платформу для користувачів. Почавши з react-i18next і еволюціонуючи до модульної структури файлів, ми забезпечили масштабованість додатку в міру того, як зростали потреби у перекладах. Проблеми з перекладом динамічного контенту та форматуванням були вирішені за допомогою інтерполяції та API Intl, що зробило додаток готовим до глобальної аудиторії.

Ми сподіваємося, що цей посібник допоможе вам ефективно впровадити i18n у ваші проєкти.

Щасливого кодування! 👨🏻‍💻🎉

Відкрийте worklenz сьогодні
Готові трансформувати ваші робочі процеси? клікніть тут щоб дослідити Worklenz і побачити, як він може допомогти вашій команді досягти більшого.

Перекладено з: Zero to i18n: Adding Multi-language Support to worklenz