我有一个nextjs应用程序,我想使用i18 next和next-i18 next(https://github.com/isaachinman/next-i18next)扩展它。
默认配置是在./public/locales/{lng}/{ns}.json
下查找json文件,其中lng是语言,ns是命名空间。
然而,我的要求是,这应该从一个API端点提供服务。我正在努力找到正确的配置,因为next-i18next
现在忽略了我的设置,并且没有向我的后端发出任何xhr请求。
next-i18next.config.js:
const HttpApi = require('i18next-http-backend')
module.exports = {
i18n: {
defaultLocale: 'de',
locales: ['en', 'de'],
},
backend: {
referenceLng: 'de',
loadPath: `https://localhost:5001/locales/de/common`,
parse: (data) => {
console.log(data)
return data
}
},
debug: true,
ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
serializeConfig: false, // because of the custom use i18next plugin
use: [HttpApi],
}
字符集
我在这里不知所措。我做错了什么?
2条答案
按热度按时间50few1ms1#
最后我把它拼凑在一起。
字符集
您可能会遇到一个错误,显示为
You are passing a wrong module! Please check the object you are passing to i18next.use()
。如果是这种情况,你可以强制http后端加载为commonjs,通过使用以下导入:型
第一个可以在webpack 5上使用,而我必须在webpack 4上使用cjs导入。虽然我找不到原因。
此后,其一帆风顺:
_app.tsx:
型
anypage.tsx:
型
如果你只需要在构建过程中获取一次locale,你可以使用
getStaticProps
来代替--这取决于你。h5qlskok2#
经过长时间的寻找解决方案,我最终得到了这个工作示例。也许它帮助了别人。
第一个月
字符集
pages/_app.tsx
个型
next.config.js
个型
而在API端点需要调用
loadNamespaces
函数pages/api/some-page.ts
个型
我的区域设置文件位于此文件夹
public/locales/
中,因此“common”命名空间的完整路径为public/locales/en/common.json