我已经集成了i18 n与我的nextjs项目我有这个文件夹结构为我的地区（如果其相关）public/locales/en/translation.json和public/locales/fr/translation.json
我得到的错误是
未捕获错误：文本内容与服务器呈现的HTML不匹配。警告：文本内容不匹配。服务器：“about”客户端：“关于我们”
这是我的语言切换器
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.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;型
这是我的下一个-i18next.js.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
};型
2条答案
按热度按时间hiz5n14c1#
您必须在i18n配置中传递资源
字符串
p4tfgftt2#
好吧，我仍然不知道错误是如何消失的，但我解决了这个问题，我更新了我的i18n.js文件这里的解决方案，如果有人知道如何解决错误，请告诉
字符串