nextjs & react-i18next：图像和输入占位符未翻译

Question

语言检测工作正常。所有字符串都被翻译成用户的语言，但图像和输入占位符以默认语言显示。当我更改语言时，手动翻译图像和占位符会按预期工作。

这是我的i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './locales/en.json';
import ru from './locales/ru.json';

const resources = { en, ru };
const DETECTION_OPTIONS = {
order: ['localStorage','navigator'],
cache: ['localStorage'],
debug: true,
};
i18n
.use(LanguageDetector)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
detection: DETECTION_OPTIONS,
fallbackLng: 'en',
supportedLngs: ['en', 'ru'],
interpolation: {
escapeValue: false // react already safes from xss
},
react: {
bindI18n: 'languageChanged loaded',
wait: true,
useSuspense: false
}
});
export default i18n;

我的页面有一个简短的版本:

import React, { useRef, useEffect, useState } from 'react'
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";

export default function Feedback(){
const { t, ready } = useTranslation('', { useSuspense: false });
if (ready === false){
return <div></div>
}
return <div className="feedback-page">
...
<img className="feedback-logo" src={t('feedback.whiteLogo')}/>
<input type="email" name="email" className="feedback-input" 
onChange={e => setEmail(e.target.value)} placeholder={`${t('feedback.email')}`} value={email}/>
...
</div>

}

我也尝试使用悬疑，但得到错误"ReactDOMServer不支持悬疑"

有办法让它工作吗?

Answer 1

最好的解决方案是使用next-i18next和"getServerSideProps"选项和禁用悬念。图像和占位符以用户的语言加载。简直妙不可言