时间戳

首页 > 解决方案 > 可以使用 next-i18next 翻译“aria-label”

next.js - 可以使用 next-i18next 翻译“aria-label”

问题描述

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

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

该组件使用withTranslation来自next-i18next 的HOC，例如：

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

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

标签： next.jsi18next

解决方案

Aria-label 是一个常规的 DOM 属性，你可以翻译它。

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

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

推荐阅读