可以使用next-i18next

Question

我有一个支持多种语言的应用程序，并且我想翻译诸如“ aria-label”之类的可访问性道具。就我而言，我在 next-i18next 中使用了 Next.js 。 我为这些翻译（a11y）创建了一个命名空间

<IconButton
  aria-label={t('a11y:TogglePassVisibility')}
  onClick={handleClickShowPassword}
  edge="end">
    {showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>

该组件正在使用 next-i18next 中的HOC withTranslation，例如：

export default withTranslation(['common', 'auth', 'a11y'])(SignUp);

但是我收到此消息：警告：道具aria-label不匹配。服务器：“切换密码可见性”客户端：“ TogglePassVisibility”。如果我检查DOM，则可以看到它正在运行，但警告仍然存在。 不知道框架是否支持它。我做了研究，但到目前为止还算不上运气。

Answer 1

Aria-label是常规的DOM属性，您可以对其进行翻译。

由于Next.js是服务器和客户端渲染器，因此从您看来错误似乎服务器端渲染与客户端不同。

有很多可能的原因，其中之一是服务器端的语言不同于客户端的语言。