我已将 i18n 与我的 nextjs 项目集成 我的语言环境有这个文件夹结构（如果相关的话）
public/locales/en/translation.jsonpublic/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
};
好吧，我仍然不知道错误是如何消失的，但我解决了问题 我更新了我的 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;