Использование i18next для интернационализации на основе React

Интернационализация (i18n) имеет решающее значение для расширения охвата программного обеспечения на мировых рынках. Одним из самых эффективных инструментов для этой цели в экосистеме JavaScript является i18next. В этой статье рассматривается i18next, особенно его интеграция с React, и подчеркиваются его преимущества, совместимость с различными фреймворками и советы по улучшению усилий по локализации.

Что такое i18next?

i18next — это мощная платформа для интернационализации JavaScript-приложений. Она упрощает добавление многоязычной поддержки в веб-, мобильные и десктопные приложения. Платформа позволяет управлять динамической трансляцией, что делает проще адаптацию приложений к разным языкам и регионам.

Преимущества i18next

• Простота интеграции

i18next легко интегрируется в существующие проекты и поддерживает популярные фреймворки JavaScript, такие как React, Angular и Vue. Такая универсальность делает его предпочтительным выбором для разработчиков.

• Настройка и гибкость

i18next предлагает модульную структуру, которая позволяет разработчикам использовать только те функции, которые им нужны. Эта высокая степень настройки гарантирует, что фреймворк может соответствовать широкому спектру требований проекта.

• Динамическая загрузка переводов

Фреймворк поддерживает динамическую загрузку переводов, оптимизируя производительность за счет получения только необходимых языковых ресурсов по требованию.

• Множественное число и контекстуализация

i18next включает встроенную поддержку обработки множественного числа и контекстуализации, обеспечивая точные языковые вариации в зависимости от количества или контекста.

• Поддержка различных форматов файлов

Он поддерживает множество форматов файлов для хранения переводов, включая JSON и YAML, что обеспечивает гибкость в выборе формата, который наилучшим образом соответствует потребностям проекта.

• Богатая экосистема

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

• Несколько вариантов бэкенда

i18next поддерживает различные бэкенды для хранения и извлечения переводов, такие как в памяти, HTTP и пользовательские бэкенды, что позволяет интегрироваться с различными решениями хранения данных.

• Активное развитие и обслуживание

Регулярные обновления и улучшения поддерживают актуальность i18next в соответствии с лучшими практиками и развивающимися потребностями веб-разработки.

Интеграция React-i18next

Одним из наиболее популярных способов интеграции i18next является использование библиотек react-i18next. Это сочетание позволяет эффективно осуществлять интернационализацию в компонентах React, облегчая динамическое переключение языка и бесшовное управление переводом.

Настройте i18next в вашем приложении React (nextjs), создав экземпляр i18next и инициализировав его с необходимыми параметрами.

Пример кода для React-i18next

Вот пошаговый пример настройки и использования react-i18next в приложении React:

1. Установка зависимостей

Сначала установите i18next, react-i18next и next-i18next для загрузки переводов с сервера:

npm install i18next react-i18next next-i18next

2. Инициализация i18next

Создайте файл с именем next-i18next.config.js для настройки и инициализации i18next:

// next-i18next.config.js
const path = require('path'); // Добавить эту строку для определения path
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // добавьте сюда свои языки
    // localeDetection: false,  // по умолчанию true
  },
  localePath: path.resolve('./content/locales'),  // здесь находится путь к файлу i18n
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'Английский',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // добавьте эту конфигурацию i18n
};

3. Настройка файлов перевода

Создайте каталог locales с подкаталогами для каждого языка (en, de, и т.д.). Внутри каждого подкаталога создайте файл translation.json:

пример:

-content
  -locales
    -en
      -translation.json
      -'другой файл, если он у вас есть'.json
    -de
      -translation.json
      -'другой файл, если он у вас есть'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. Оберните свое приложение с помощью I18nextProvider

В вашем основном файле, например index.js, App.js или _app.tsx, оберните свое приложение с помощью appWithTranslation:

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // оберните таким образом

5. Использование хука перевода в компонентах

Теперь вы можете использовать хук useTranslation для перевода строк в своих компонентах:

Сначала нужно использовать serverSideTranslations в файле уровня страницы

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

И затем в вашем компоненте

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation - по умолчанию здесь

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // использование другого пространства имен
    </div>
  );
};

export default MyComponent;