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

Question

Language detection works fine. All strings are translated into user's language but images and input placeholders are shown in default language. When I change languages manually translation of images and placeholders is working as expected.

There is my 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;

There is a short version of my page:

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>


}

I've also tried to use Suspense, but got error "ReactDOMServer does not yet support Suspense".

Is there any way to make it work?

Answer 1

The best solution was to use next-i18next with "getServerSideProps" option and Suspense disabled. Images and placeholders are loaded in the user's language. Works like a charm.