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

最佳解决方案是使用带有“getServerSideProps”选项的 next-i18next 并禁用 Suspense。图像和占位符以用户的语言加载。很有魅力。

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

nextjs & react-i18next: Images and input placeholders are not translated

javascript

internationalization

reactjs

next.js

react-i18next