I am trying to implement internationalization using react-i18n in my frontend application. The application uses TypeScript and Next.js.

I have set up two languages, English and Finnish, along with a language switcher. When I refresh the page with English (default) selected, all is well, but when I refresh with Finnish selected, I get a HydrationError saying that 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 as shown below:

I assume this is because the i18n library modifies the language on the client side, disrupting the server-side rendering checks.

My i18n.ts is as follows:

"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;

The next-i18next library does not work since that is only for pages applications and I am using an app application.

How do I make it so that either the i18n library does the modifications on the server side, or otherwise so that the HydrationError is resolved?