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

问题描述

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

• Image Component and Image Optimization (next/image)
• Internationalized Routing (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 应用程序中，那将非常有帮助。

解决方法

我认为没有名为 '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',...
   }
 },