如何在不覆盖整个导出对象的情况下将下一个包导入 next.config.js？

Question

如何在不覆盖整个导出对象的情况下将下一个包导入 next.config.js？

我不断看到通过 next.config.js 配置 next.js 的重复模式与其 (config.js) 文档不一致。它涉及将单个导入分配给 module.exports。

例如，从这里提取：https://nextjs.org/docs/advanced-features/using-mdx

Require the package and configure to support top level .mdx pages. The following adds the options object key allowing you to pass in any plugins:

// next.config.js

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
})

来自https://nextjs.org/docs/api-reference/next.config.js/introduction 的 next.config.js 的一般模式是在对象中分配配置。

const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

我的问题是，如果此示例中的 MDX 函数用单个函数覆盖 module.exports，我该如何配置 next.js 以使用 mdx 和其他配置？

Answer 1

我不熟悉next.js，但从外观上看，您可以使用spread syntax 将MDX-config 与您的自定义选项合并：

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

const nextConfig = {
  /* config options here */
};

module.exports = { 
  ... withMDX({
     pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  }),
  ... nextConfig
};