当我使用 next-translate/useTranslation 更改语言（英语除外）后刷新时，Next.js 中的水化错误

问：

我在使用 Next.js 应用程序中 next-translate 包中的 useTranslation 钩子时遇到了问题。虽然我的所有语言都被识别出来，但每当我更改语言和刷新页面时，我都会遇到冻结错误。

这是我在位于根目录的 i18n.js 文件中的设置：

module.exports = {
  locales: ["ar", "en","es"],
  defaultLocale: "en",
  pages: {
    "*": ["common"],
  },
};

我在我的组件中使用useTranslation，如下所示：

import useTranslation from "next-translate/useTranslation";

const ComponentName = () => {
  const { t } = useTranslation("common");
  // rest of the component
}

我已将所有翻译放在公共文件夹中。当我更改语言时，我会将新语言存储在本地存储中。

当我更改语言然后刷新页面时，会出现此问题。我收到冻结错误，因为服务器端语言被检测为英语，而客户端具有我选择并存储在本地存储中的自定义语言。

有没有办法解决这个问题，以便服务器端在刷新时识别所选语言？我已经尝试了所有方法。非常感谢任何帮助或指导。https://drive.google.com/file/d/1WSBKdXKTpOlQv6g2v1c2KpnZaZjecHhf/view?usp=sharing - 这是我的文件夹结构

我在Next.js应用程序中使用next-translate/useTranslation钩子实现了多语言支持。更改语言时，我将所选语言存储在本地存储中。我希望应用程序即使在页面刷新后也能保持所选语言，从而将页面无缝翻译成所选语言。更改语言后刷新页面时，我遇到了冻结错误。服务器端检测到英语（默认语言），而客户端具有我选择的自定义语言，导致不匹配。