很抱歉我是个菜鸟，但我真的很困惑如何处理这个问题。所以我按照https://github.com/i18next/next-i18next上的说明去做，但当我遇到index.js时，我很困惑。每当我在我的登陆页面上点击/de的切换开关时，它都会在URL“http：//localhost：3000/de”中正确翻译。
但在另一个页面，如“About”或在任何其他页面，它不翻译，但网址切换到“http：//localhost：3000/de/about”.它不会去我的404错误页面.但我不明白它为什么不翻译.
在我的index.js中，如果我删除了“服务”组件，其中包含了登录页面的所有组件。并替换为其他组件文件，如“关于”组件页面，它翻译好。
看起来“http：//localhost：3000/de”网址只在翻译中有效。但是在不同的网址路径中它不起作用。如何做到这一点？谢谢。
请查看我的代码。
我的区域设置路径
public/locales/de/common.jsonsrc/pages/_app.js
import nextI18NextConfig from '../../next-i18next.config'
<Component {...pageProps} />
export default appWithTranslation(App, nextI18NextConfig);src/pages/index.js
import React from 'react';
import Service from 'views/Service';
import i18nextConfig from '../../next-i18next.config';
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
const IndexPage = () => {
return (
<Service/> <— this contains my landing page the only can be translated as “localhost:/3000/de” (src/pages/views/service)
)
};
export async function getServerSideProps({ locale }) {
return { props: {
...(await serverSideTranslations(locale, ['common', 'footer', 'stripe', ‘navbar'], i18nextConfig))
} }
}
export default IndexPage;我把我的切换语言切换器src/layouts/Main/components/Navbar/Navbar.js
const onToggleLanguageClick = (locale) => {
const { pathname, asPath, query } = router
router.push({ pathname, query }, asPath, { locale })
}
const changeTo = router.locale === 'de' ? 'en' : 'de'
return (
<button onClick={() => onToggleLanguageClick(changeTo)}>
{t('change-locale', { changeTo })}
</button>
)这是我的下一个-i18 next.config
const path = require('path');
module.exports = {
i18n: {
locales: ['en', 'de'],
defaultLocale: 'en',
localePath: path.resolve('./public/locales')
},
}我的下一个. config.js
const nextConfig = {
i18n,
…some code
}
module.exports = nextConfigsrc/pages/_document.js
import i18nextConfig from '../../next-i18next.config';
export default class MyDocument extends Document {
render() {
const currentLocale = this.props.__NEXT_DATA__.query.locale ?? i18nextConfig.i18n.defaultLocale;
return (
<Html lang={currentLocale}>
.....
2条答案
按热度按时间93ze6v8z1#
首先，删除appWithTranslation中的第二个参数，也不需要更改html标记（src/pages/_document.js）中的语言。i18自己就完成了。
错误。请使用默认路径'public/locales/en/common.json'。您也可以删除i18配置文件中的'localePath'。
参考：https://github.com/i18next/next-i18next
5n0oy7gb2#
我想通了我的问题。被我的许多文件路径弄糊涂了。也许它能帮助到某人。
将这些添加到组件中
这不会翻译您的“http：//localhost：3000/de/componentname”，它在明显的路径中：src/pages/componentname.js
...就像我上面的src/pages/index.js一样。