我正在尝试通过默认教程向我的网站添加翻译，
我的/pages/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;
/pages/_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 中带有翻译字符串的导航栏
import { useTranslation } from 'next-i18next';
const Nav = () => {
const { t, i18n } = useTranslation('navbar');
return (
<div>
{t('home')}
</div>
)
}
export default Nav;
/pages/_app.js
import { appWithTranslation } from 'next-i18next';
function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}
export default appWithTranslation(MyApp);
但翻译仍然不起作用，我试图添加异步函数 getStaticProps 来翻译到导航栏组件，但出现错误“无法解析'fs'” - 因为您在运行客户端代码的某个地方导入了 serverSideTranslations
我知道这是一个迟到的答案，但希望它对其他人有帮助：
您收到此错误
"Can't resolve 'fs'" - because you have imported serverSideTranslations in some place where client side code is being rungetStaticPropsgetServerSideProps\pages要在
\pagesimport { useTranslation } from 'next-i18next';useTranslation()const { t } = useTranslation('navbar');我也遇到过同样的问题。
就我而言，我通过添加 I18nextProvider 包装器来解决
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
type Props = {
children: React.ReactNode;
};
export default function LocalizationProvider({ children }: Props) {
const { currentLang } = useLocales();
return (
<I18nextProvider i18n={i18n}>
<MuiLocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={currentLang.adapterLocale}>
{children}
</MuiLocalizationProvider>
</I18nextProvider>
);
}