如何将i18n和next/config.js中的next/image与TypeScript一起使用

Question

我正试图在NextJS中使用TypeScript创建一个小型应用程序，因为现在Next.js开箱即用地支持TypeScript。我还想结合这两个新添加的功能：

• 图像组件和图像优化(next/Image(
• 国际化路由(i18n(

以i18n为例：

// next.config.js
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application 
// Sub-path Routing 
locales: ['en', 'cn'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en',
},
}

不幸的是，我在next.config.js中使用它们时遇到了很大的困难，对于普通应用程序(仅限JavaScript(，它正在正常工作。但对于TypeScript版本，我得到了这个错误：

(node:15704) UnhandledPromiseRejectionWarning: TypeError: Cannot set property '__nextLocale' of undefined

如果你们中的任何人能帮助我，或者能举一个例子，说明如何正确使用next.config.js并将这些新功能纳入TypeScript NextJS应用程序，这将非常有帮助。

Answer 1

我认为没有名为'en'和'cn'的区域设置

https://en.wikipedia.org/wiki/Language_localisation

我认为你需要的是：

const withImages = require('next-images')
const withPWA = require('next-pwa')
module.exports = withPWA(
withImages({
images: {
domains: [
'images.ctfassets.net',
'imgix.cosmicjs.com',
'cdn.cosmicjs.com',
],
i18n: {
// These are all the locales you want to support in
// your application
locales: ['en-US', 'zh-CN'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'pt-BR',
...
}
},