我在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钩子实现了多语言支持。更改语言时，我将所选语言存储在本地存储器中。我希望应用程序即使在页面刷新后也能保持所选语言，无缝地将页面翻译为所选语言。在更改语言后刷新页面时，我遇到了水合错误。服务器端检测到英语（默认语言），而客户端具有我选择的自定义语言，导致不匹配。