Вы устали бороться с локализацией в своих проектах веб-разработки? Не смотрите дальше! В этой статье блога мы погрузимся в мощный мир Yarn i18next и рассмотрим множество методов, которые помогут ускорить ваши усилия по локализации. Пристегнитесь и будьте готовы вывести свои многоязычные веб-сайты на новый уровень!

1. Установка:
   Начнем с основ. Чтобы начать использовать Yarn i18next, убедитесь, что в вашей системе установлена ​​Yarn. Затем откройте терминал и выполните следующую команду:

   yarn add i18next

2. Конфигурация:
   Далее вам необходимо настроить i18next в вашем проекте. Создайте файл с именем i18n.jsи добавьте следующий код:

   import i18n from 'i18next';
   import { initReactI18next } from 'react-i18next';
   i18n
    .use(initReactI18next)
    .init({
      // Configuration options go here
    });
   export default i18n;

3. Языковые ресурсы.
   Для поддержки разных языков вам необходимо предоставить ресурсы для конкретных языков. Создайте папку с именем localesв корневом каталоге вашего проекта и добавьте файлы JSON для каждого поддерживаемого языка. Например, en.jsonдля английского языка и fr.jsonдля французского языка. Вот пример того, как может выглядеть файл языковых ресурсов:

   {
    "welcome": "Welcome to my website!",
    "greeting": "Hello, {{name}}!"
   }

4. Инициализация:
   В основной файл приложения импортируйте файл i18n.jsи инициализируйте i18next:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { I18nextProvider } from 'react-i18next';
   import i18n from './i18n';
   ReactDOM.render(
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>,
    document.getElementById('root')
   );

крючок из react-i18next

import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
 const { t } = useTranslation();
 return (
   <div>
     <h1>{t('welcome')}</h1>
     <p>{t('greeting', { name: 'John' })}</p>
   </div>
 );
}

В этом примере tи greetingпреобразуются в текущий язык.

5. Переключение языков.
   Чтобы пользователи могли переключаться между языками, вы можете использовать функции useLngи changeLanguageиз react-i18next. Вот пример:

   import React from 'react';
   import { useTranslation, useLng, changeLanguage } from 'react-i18next';
   function LanguageSwitcher() {
    const { i18n } = useTranslation();
    const lng = useLng();
    const handleLanguageChange = (language) => {
      i18n.changeLanguage(language);
    };
    return (
      <div>
        <button onClick={() => handleLanguageChange('en')}>English</button>
        <button onClick={() => handleLanguageChange('fr')}>French</button>
        <p>Current language: {lng}</p>
      </div>
    );
   }

   В этом примере функция handleLanguageChangeиспользуется для переключения языка при нажатии кнопки.

И вот оно! С Yarn i18next в вашем распоряжении мощный инструмент для локализации ваших проектов веб-разработки. Попрощайтесь с головной болью, связанной с языком, и обеспечьте своим пользователям беспрепятственный многоязычный интерфейс.

Не забывайте постоянно обновлять файлы языковых ресурсов по мере добавления нового контента на свой веб-сайт и поддержки дополнительных языков. Приятного кодирования!