javascript - HydrationError when using next-i18n with Next.js and TypeScript - Stack Overflow

admin管理员组

文章数量:1394740

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?

本文标签： javascriptHydrationError when using nexti18n with Nextjs and TypeScriptStack Overflow