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>


}

我也尝试过使用Suspense，但得到错误"ReactDOMServer尚不支持Suspense“。

有没有办法让它工作呢？

Answer 1

最好的解决方案是使用next-i18next，带"getServerSideProps“选项并禁用Suspense。图像和占位符以用户的语言加载。就像一种护身符。