如何在带有 TypeScript 的 next.config.js 中使用 i18n 和 next/image?

时间:2021-01-06 05:02:25

标签: typescript next.js nextjs-image

我正在尝试在 NextJS 中使用 TypeScript 创建一个迷你应用程序,因为现在 Next.js 支持 TypeScript 开箱即用。而且我还想合并这两个新添加的功能:

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 应用程序中,那将非常有帮助。

1 个答案:

答案 0 :(得分: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',
      ...
   }
 },