i18next — популярная библиотека для интернационализации, которая облегчает перевод веб-приложений на несколько языков. Это отличный выбор для разработчиков React и Next.js, стремящихся поддерживать пользователей по всему миру. В этой статье мы рассмотрим, как i18next легко интегрируется с приложениями на React и Next.js.
Давайте начнем с краткого обзора i18next. Это библиотека JavaScript, которая предоставляет простой API для загрузки и управления переводами. Вы можете использовать его с различными фронтенд-фреймворками, включая React и Next.js. i18next поддерживает множество функций из коробки, таких как множественное число, контекст и интерполяция. Он также поддерживает загрузку переводов из различных источников, включая файлы JSON и API бэкенда.
Чтобы интегрировать i18next в ваше приложение на React или Next.js, сначала необходимо его установить. Вы можете сделать это с помощью npm или yarn, выполнив следующую команду:
npm install i18next
или
yarn add i18next
После установки i18next вы можете начать использовать его в вашем приложении. Один из самых простых способов использовать i18next с React — это использовать useTranslation крючок. Этот хук обеспечивает удобный способ загрузки переводов и перевода текста внутри ваших компонентов.
Вот пример того, как использовать это useTranslation хуки в компоненте React:
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
В этом примере мы импортируем useTranslation крючок из react-i18next пакет. Затем мы используем его для загрузки переводов и получения функции перевода (t) который мы можем использовать для перевода текста внутри компонента.
Затем мы можем использовать t функция для перевода title е description строки из наших файлов перевода Файлы переводов могут быть файлами JSON, например:
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC может автоматически создавать несколько языков с помощью плагина FluentC для i18next.
В этом примере у нас есть два перевода: один для английского и один для французского. Мы можем загрузить эти переводы в наше приложение, используя i18next библиотека
Чтобы загрузить переводы, мы можем использовать i18next объект и его init функция. Вот пример:
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
В этом примере мы импортируем английские и французские переводы из файлов JSON. Затем мы инициализируем i18next этими переводами и устанавливаем язык по умолчанию как английский. Мы также настраиваем параметры интерполяции, чтобы мы могли использовать переменные в наших переводах.
Как только вы загрузите свои переводы и настроите i18next, вы можете начать использовать его useTranslation хуок для перевода текста внутри ваших компонентов.
В приложении Next.js вы можете использовать тот же подход для интеграции i18next. Вы можете загрузить переводы в getStaticProps или getServer