javascript reactjs next.js server-side-rendering i18next

Text content does not match server-rendered HTML for translation using i18n

i have integrated i18n with my nextjs project i have this folder structure for my locales (if its relevent) public/locales/en/translation.json and public/locales/fr/translation.json

The error i get is

Uncaught Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: "about" Client: "About us"

this is my language switcher

import { withTranslation } from "next-i18next";
const LanguageSwitcher = ({ i18n }) => {
  const changeLanguage = (locale) => {
    console.log("LOCALE+++++++++++++>", locale);
    i18n.changeLanguage(locale);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("fr")}>French</button>
    </div>
  );
};

export default withTranslation()(LanguageSwitcher);

and this is my component in which i am using multi language

import { useTranslation } from "next-i18next";
import LanguageSwitcher from "./LanguageSwitcher";

function HeaderNav() {
  const { t } = useTranslation("translation");
 <LanguageSwitcher />
        <Typography>{t("about")}</Typography>
export default HeaderNav;

this is my Layout for whole application

"use client";
import "./globals.css";
import HeaderNav from "./components/headerNav";
import { Providers } from "./GlobalRedux/provider";
import { usePathname } from "next/navigation";
import { Raleway } from "next/font/google";
import { CurrencyProvider } from "./context/CurrencyContext";
import "./i18n";
import { appWithTranslation } from "next-i18next";

const raleway = Raleway({ subsets: ["latin"] });

function RootLayout({ children }) {
  const pathname = usePathname();

  if (pathname.includes("/login")) return children;
  if (pathname.includes("/register")) return children;
  if (pathname.includes("/resetpassword")) return children;
  return (
    <html lang="en">
      <body className={raleway.className}>
        <CurrencyProvider>
          <Providers>
            <HeaderNav />

            {children}
          </Providers>
        </CurrencyProvider>
      </body>
    </html>
  );
}
export default appWithTranslation(RootLayout);

this is my next.config.js

// next.config.js
const { i18n } = require("./next-i18next.config");

const nextConfig = {
  distDir: "build",
  i18n,
};

module.exports = nextConfig;

this is my i18n.js

 // Example i18n initialization
    import i18n from "i18next";
    import { initReactI18next } from "react-i18next";
    import Backend from "i18next-http-backend";
    import LanguageDetector from "i18next-browser-languagedetector";
    
    i18n
      .use(Backend)
      .use(LanguageDetector)
      .use(initReactI18next)
      .init({
        fallbackLng: "en",
        interpolation: {
          escapeValue: false,
        },
      });
    
    export default i18n;

this is my next-i18next.config.js

 // next-i18next.config.js
    const { i18n } = require("next-i18next");
    
    module.exports = {
      i18n,
      locales: ["en", "fr"], // Add more locales as needed
      defaultLocale: "en",
      fallbackLng: "en",
      // Other configuration options can go here
    };

Solution

You have to pass resources in i18n configurations

const resources = {
  en: {
    translation: require("../../public/locales/en/translation.json"),
  },
  fr: {
    translation: require("../../public/locales/fr/translation.json"),
  },
};