或
中使用 useTranslation 钩子中的 t() ，它就可以正常工作，但是在初始渲染时 t('placeholder') 会选择 es（西班牙语）翻译，这是后备语言。这会导致输入等组件显示错误的占位符。

`<Input placeholder={t('placeholder')} type="text" ></Input>`

`i18n.use(LanguageDetector).init({ detection: options, fallbackLng: 'es', resources, supportedLngs: ['en', 'es'], })`

我直接在组件中加载了翻译文件，并将它们用作对象 EN.placeholder 而不是 t(''placeholder) 并且它起作用了，但是有没有更好的方法来解决这个问题？我猜这是因为下一个 JS 使用内置的服务器端渲染

Question

我在使用 next js 构建的应用程序中使用 i18next 包。只要我们在

或

中使用 useTranslation 钩子中的 t() ，它就可以正常工作，但是在初始渲染时 t('placeholder') 会选择 es（西班牙语）翻译，这是后备语言。这会导致输入等组件显示错误的占位符。

<Input
 placeholder={t('placeholder')}
 type="text"
></Input>

i18n.use(LanguageDetector).init({
  detection: options,
  fallbackLng: 'es',
  resources,
  supportedLngs: ['en', 'es'],
})

我直接在组件中加载了翻译文件，并将它们用作对象 EN.placeholder 而不是 t(''placeholder) 并且它起作用了，但是有没有更好的方法来解决这个问题？我猜这是因为下一个 JS 使用内置的服务器端渲染