我正在自己的前端应用里尝试用react-i18n实现国际化，这个应用基于TypeScript和Next.js App Router开发。

我已经配置了英语（默认）和芬兰语两种语言，还做了语言切换功能。默认选英语的时候刷新页面一切正常，但切换到芬兰语之后再刷新，就会弹出HydrationError错误，具体提示如下：

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

错误截图：

我猜测这个问题的原因是i18n库只在客户端修改语言设置，破坏了服务端渲染的一致性校验机制。

下面是我的i18n.ts配置代码：

"use client"

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import resourcesToBackend from "i18next-resources-to-backend"
import enNs from "./public/locales/en.json";
import fiNs from "./public/locales/fi.json";

export const defaultNS = "ns1";

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(resourcesToBackend((language: any, namespace: any) => import(`./public/locales/${language}.json`)))
  .init({
    debug: true,
    lng: undefined,
    fallbackLng: "en",
    defaultNS,
    resources: {
        en: {
          ns1: enNs
        },
        fi: {
          ns1: fiNs
        },
      },
  });

export default i18next;

另外我试过next-i18next，但它只适用于Next.js的Pages Router，我用的是App Router所以用不了。

想请教大家怎么解决这个问题？要么让i18n库能在服务端也处理语言设置，要么有其他办法消除这个HydrationError都可以。

备注：内容来源于stack exchange，提问作者Sergey