您将需要使用i18next传递一个initReactI18next实例
我试图添加翻译到我的网站默认教程，
my /i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
i18n
// load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
// learn more: https://github.com/i18next/i18next-http-backend
// want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
fallbackLng: 'en',
debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
}
});
export default i18n;/page/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export default function Document(){
return(
<Html>
<Head>
<body>
<Main/>
<NextScript/>
</body>
</Head>
</Html>
);
}
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'footer'])),
// Will be passed to the page component as props
},
};
}和/component/Navbar.js中的字符串转换的navbar
import { useTranslation } from 'next-i18next';
const Nav = () => {
const { t, i18n } = useTranslation('navbar');
return (
<div>
{t('home')}
</div>
)
}
export default Nav;/page/_app.js
import { appWithTranslation } from 'next-i18next';
function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}
export default appWithTranslation(MyApp);但是翻译仍然不起作用，我试图添加异步函数getStaticProps，以便将其转换为Navbar组件，但是出现了错误“无法解析'fs'”--因为您已经在运行客户端代码的某个地方导入了serverSideTranslations
回答 1
Stack Overflow用户
发布于 2022-11-22 09:55:30
我知道这是一个迟来的答案，但希望它能帮助到其他人：
您得到了这个错误"Can't resolve 'fs'" - because you have imported serverSideTranslations in some place where client side code is being run --因为getStaticProps和getServerSideProps只应该在\pages目录中使用。
要使用\pages之外的转换，只需对useTranslation()对象const { t } = useTranslation('navbar');进行import { useTranslation } from 'next-i18next';和析构
https://stackoverflow.com/questions/72287454
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号