Встречается на собеседованиях • сегодня
Как сделать локализацию нескольких языков в приложении при получении с Backend актуальных данных в нужной локации
Для локализации с динамическими данными с бекенда можно использовать библиотеку `i18next` вместе с `react-i18next`.
1. **Настройка i18next**:
```javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
resources: {
en: { translations: {} },
ru: { translations: {} },
},
lng: 'en',
fallbackLng: 'en',
interpolation: { escapeValue: false },
});
```
2. **Загрузка переводов с бекенда**:
```javascript
const loadTranslations = async (lang) => {
const response = await fetch(`/api/translations?lang=${lang}`);
const data = await response.json();
i18n.addResourceBundle(lang, 'translations', data);
i18n.changeLanguage(lang);
};
```
3. **Использование в компоненте**:
```javascript
import { useTranslation } from 'react-i18next';
const Component = () => {
const { t } = useTranslation();
return
{t('key_from_backend')}
;
};
```
**Нюансы**:
- Кешируйте переводы, чтобы избежать лишних запросов.
- Учитывайте асинхронность загрузки (можно добавить лоадер).
- Для SSR (Next.js) используйте `getServerSideProps` для предзагрузки.
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы