代码之家 › 专栏 › 技术社区 › Hamza Manan

文本内容与使用i18n进行翻译的服务器呈现HTML不匹配

i18next server-side-rendering next.js reactjs javascript

Hamza Manan · 技术社区 · 2 年前

我已经将i18n与我的nextjs项目集成在一起我有适合我所在地区的文件夹结构(如果相关的话) public/locales/en/translation.json 和 public/locales/fr/translation.json

我得到的错误是

未捕获错误:文本内容与服务器呈现的HTML不匹配。警告:文本内容不匹配。服务器:“关于”客户端:“关于我们”

这是我的语言切换器

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

这是我使用多种语言的组件

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

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

这是我的整个应用程序的布局

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

这是我的next.config.js

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

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

module.exports = nextConfig;

这是我的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;

这是我的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
    };

0 回复 | 直到 2 年前

Hamza Manan 2 年前

嗯,我仍然不知道这个错误是怎么消失的,但我解决了这个问题我更新了我的 i18n.js 文件是解决方案,如果有人知道错误是如何解决的,请告诉

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

const resources = {
  en: {
    translation: require("../../public/locales/en/translation.json"),
  },
  fr: {
    translation: require("../../public/locales/fr/translation.json"),
  },
};
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;