如何在next.config.js中合并导出next-translate与next-images多个模块

整合配置的正确写法 #

直接将nextTranslate生成的配置对象作为参数传入withImages包装函数即可，完整代码如下：

const nextTranslate = require("next-translate");
const withImages = require('next-images')

module.exports = withImages({
  // 展开nextTranslate生成的所有配置
  ...nextTranslate(),
  // 此处可添加其他原生Next.js配置项，示例如下：
  reactStrictMode: true,
  swcMinify: true
})

原理解释 #

Next.js生态中这类以with为前缀的配置插件，本质都是接收一个配置对象、处理后返回新配置对象的高阶函数。如果后续需要接入更多同类型插件，按嵌套逻辑链式调用即可，示例如下：

// 假设额外接入next-sass插件
const withSass = require('@zeit/next-sass')

module.exports = withSass(
  withImages({
    ...nextTranslate(),
    // 其他自定义配置
  })
)

内容的提问来源于stack exchange，提问作者Gyanendra Prakash