Next.js集成react-i18next时图片与输入框占位符未翻译问题

问题原因 #

该问题核心是i18n语言检测、初始化流程和组件首次渲染的时序不一致：i18n完成用户语言检测、加载对应资源前，组件已经完成首次渲染，所以图片地址、输入框占位符会读取默认 fallback 语言的内容。手动切换语言时i18n已经完成初始化，所以可以正常触发重渲染更新内容。
你遇到的ReactDOMServer does not yet support Suspense报错是因为服务端渲染场景下React本身不支持Suspense，不需要强行使用Suspense方案解决该问题。

解决步骤 #

• 修正useTranslation调用参数
  你当前调用时第一个参数传了空字符串，会导致无法正确绑定翻译资源、读取ready状态，将调用参数修改为：

const { t, ready } = useTranslation(undefined, { useSuspense: false });

如果你的项目拆分了翻译命名空间，把第一个参数替换为对应的命名空间名称即可。

• 新增初始化状态监听兜底
  如果修改后仍有问题，可以手动监听i18n的初始化完成事件，新增状态控制组件渲染，修改后的组件代码参考：

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

export default function Feedback(){
    const [initDone, setInitDone] = useState(false)
    const { t, ready } = useTranslation(undefined, { useSuspense: false });
    const [email, setEmail] = useState('')

    useEffect(() => {
        // 监听i18n初始化完成事件
        const handleI18nInit = () => setInitDone(true)
        if (i18n.isInitialized) {
            setInitDone(true)
        } else {
            i18n.on('initialized', handleI18nInit)
        }
        return () => i18n.off('initialized', handleI18nInit)
    }, [])

    if (!ready || !initDone){
        return <div></div>
    }

    return <div className="feedback-page">
        ...
        <img className="feedback-logo" src={t('feedback.whiteLogo')} alt="logo"/>
        <input type="email" name="email" className="feedback-input" 
                            onChange={e => setEmail(e.target.value)} placeholder={t('feedback.email')} value={email}/>
        ...
   </div>
}

• 确认翻译资源配置正确
  检查locales/en.json和locales/ru.json文件中，均存在feedback.whiteLogo、feedback.email对应的键值对，层级、大小写完全匹配。

内容的提问来源于stack exchange，提问作者VictoriaSh