Требуется мультиязычность на странице: английский и французский

Перевод состоит из двух частей:

• Сама страница, текст, которой приходит с бэка по REST API запросу с указанием нужного языка

• Перевод вспомогательных компонентов: кнопки, элементы навигации, отдельные заголовки.

Так же нам нужно переключение с английского языка на французский и обратно.

Для удобства работы будем использовать библиотеку Axios (установка npm i axios).

В корне проекта в папке store заводим инстанс, который отвечает за первичную настройку запросов:

apiInstance.ts

import axios from 'axios'; const URL = process.env.NEXT_PUBLIC_API_URL; const instance = axios.create({ baseURL: `${URL}/api/`, }); export default instance;

Для безопасности разработки используем process.env для хранения URL бэкэнда.

В той же папке создаём файлы с GET запросом для отдельных страниц с нужными эндпоинтами.  Для примера назовём один из файлов наших страниц  apiTeam.ts, а компонент отрисовки этой страницы Team. Такие файлы мы будем заводить для каждой страницы, где предусмотрен перевод.

apiTeam.ts

import instance from './apiInstance'; const getTeam = async (lang = 'Eng') => { const res = await instance.get('team', { headers: { Language: lang, }, }); return res; }; export default getTeam;

Далее заводим файл apiTranslate.ts с GET запросом для перевода вспомогательных компонентов, которые мы будем использовать на всех страницах, где есть вспомогательные компоненты с переводом:

apiTranslate.ts

import instance from './apiInstance';  const getTranslateInfo = async (lang: string) => {  const res = await instance.get('translate/', {  headers: {  Language: lang,  },  });  return res;  }; export default getTranslateInfo;

Делаем в компонент Team импорт созданного запроса.

import getTeam from '../../store/apiTeam';

и теперь можем использовать для отрисовки страницы

useEffect(() => { setIsLoading(true); getTeam(lang = 'Eng") .then((res) => setData(res.data)) .catch((err) => console.log(err)) .finally(() => setIsLoading(false)); }, []);

используем стейт переменную const [isLoading, setIsLoading] = useState(true), чтобы страница не была пустой при отрисовке.

{isLoading ? ( <Load /> ) : ( <Team> )}

В getTeam(lang = ‘Eng») нам нужно иметь актуальное состояние языка. Пока по умолчанию у нас ‘Eng’. Для настройки хранилища и выполнения операций по переключению языка будем использовать Redux Toolkit. В уже знакомой нам папке store заводим файл store.ts:

import { configureStore } from '@reduxjs/toolkit'; import reduserLang from './languageSlics'; export const store = () => { return configureStore({ reducer: { reduserLang, }, }); }; export type AppStore = ReturnType<typeof store>; export type RootState = returnType<AppStore['getState']>; export type AppDispatch = AppStore['dispatch'];

в нем мы делаем первичную настройку хранилища. Сами стейт переменные и экшены мы настраиваем в файле languageSlics.ts:

import { createSlice } from '@reduxjs/toolkit'; interface LanguageState { lang: string; } const language = createSlice({ name: 'isLang', initialState: { lang: 'Eng' } as LanguageState, reducers: { setLang(state: LanguageState, payload: { payload: string }) { state.lang = payload.payload; } }, }); export default language.reducer; export const { setLang } = language.actions;

В результате у нас есть стейт переменная lang, которая храниться в redux хранилище, и экшен setLang, который меняет значение стейт переменной lang.

В компонент Team мы можем импортировать import { useSelector } from ‘react-redux’ и использовать конструкцию:

const lang = useSelector( (state: { reduserLang: { lang: any } }) => state.reduserLang.lang );

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

getTeam(lang) .then((res) => setData(res.data)) .catch((err) => console.log(err))

Так же у нас остаётся вопрос перевода вспомогательных компонентов. Действуем аналогично.  В файле languageSlics.ts заводим переменную words и экшен setWords для неё:

import { createSlice } from '@reduxjs/toolkit'; interface LanguageState { lang: string; words: {}[]; } const language = createSlice({ name: 'isLang', initialState: { lang: 'Eng', words: [], } as LanguageState, reducers: { setLang(state: LanguageState, payload: { payload: string }) { state.lang = payload.payload; }, setWords(state: LanguageState, payload: { payload: [] }) { state.words = payload.payload; }, }, }); export default language.reducer; export const { setLang, setWords } = language.actions;

Теперь у нас в хранилище 2 переменных: lang: ‘Eng’, words: [] и экшены для изменения их значения setLang, setWords. Как говорилось выше, в lang будет храниться актуальный язык для запроса к бэкэнду. а мы будем хранить массив объектов со значением текста кнопок, заголовка и прочего. Пример массива:

["nWho": "Who we helped", "nUrgent": "Urgent help", "nNews": "News", "nAbout": "About us", "nContacts": "Contacts", "nReports": "Reports and documentation", "nTeam": "Team", "bDonate": "Donate now", "bLearn": "Learn more", "bShare": "Share", "bCopied": "Copied", "bSee": "See all", "bBack": "Back", "bHome": "Home", "bLoad": "Load more", "hAbout": "About us", "hUrgent": "Urgent help", "hNews": "News", "hPartners": "Partners", "hSubscribe": "Subscribe to our newsletter", "hPlaceholder": "Your email address", "fPolicy": "Privacy Policy", "fSite": "Site development", "fCollected": "Funds collected", "sReport": "Report"]

Переменную words мы можем использовать на странице, предварительно импортировав хук import { useSelector } from ‘react-redux’  и получить доступ к переменной через:

const words = useSelector( (state: { reduserLang: { words: any } }) => state.reduserLang.words );

Но для начала нам нужно сделать запрос к бэкэнду с языком для получения значений слов и поместить эти значения в стейт переменную words :

getTranslate(lang) .then((res) => { dispatch(setWords(res.data)); }) .catch((err) => console.log(err))

Не забываем получить доступ к стейт переменной lang:

const lang = useSelector( (state: { reduserLang: { lang: any } }) => state.reduserLang.lang );

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

Остаётся сделать переключение языка. Так как у нас в проекте переключение языка было в header, то и функционал переключения языка тоже поместил в header:

const toggleLang = () => { const langCurrent = lang === 'Eng' ? 'Fr' : 'Eng'; dispatch(setLang(langCurrent)); };

так же там поместил функционал для заполнения переменной words:

useEffect(() => { getTranslate(lang) .then((res) => { dispatch(setWords(res.data)); }) .catch((err) => console.log(err)) }, []);

И не забываем отслеживать переключение языка:

useEffect(() => {  getTranslate(lang)  .then((res) => {  dispatch(setWords(res.data[0]));  })  .catch((err) => console.log(err))  }, [lang]);

Но тут появляется тонкий момент, всё хорошо работает до того, как пользователь не обновит страницу. Переменные lang сбрасывается до начального значения и язык снова становиться по умолчанию — английским. Что бы этого избежать, мы добавим хранение актуального значения lang в sessionStorage. Для этого доработаем в функцию переключения языка

sessionStorage.setItem('lang', langCurrent): const toggleLang = () => { const langCurrent = lang === 'Eng' ? 'Fr' : 'Eng'; sessionStorage.setItem('lang', langCurrent); dispatch(setLang(langCurrent)); };

И перед GET запросом проверяем, если есть значение в  sessionStorage по ключу lang,  если есть, то берём это значение, если нет, то берём значение по умолчанию:

const langCurrent = sessionStorage.getItem('lang') ? sessionStorage.getItem('lang') : lang;

Так же актуализируем состояние языка в стейт переменной lang и sessionStorage:

sessionStorage.getItem('lang') ? dispatch(setLang(sessionStorage.getItem('lang'))) : sessionStorage.setItem('lang', lang);

Соберём запрос:

const langCurrent = sessionStorage.getItem('lang') ? sessionStorage.getItem('lang') : lang; sessionStorage.getItem('lang') ? dispatch(setLang(sessionStorage.getItem('lang'))) : sessionStorage.setItem('lang', lang); getTranslate(langCurrent) .then((res) => { dispatch(setWords(res.data[0])); }) .catch((err) => console.log(err));

Если sessionStorage.getItem(‘lang’) пусто, то мы берём значение по умолчанию из lang и его записываем в sessionStorage.setItem(‘lang’, lang).Если запись в sessionStorage присутствует по ключу lang, то используем это значение. Таким образом, при перезагрузке страницы, у нас остаётся актуальное значение языка.