配置多个下一个插件：withMDX、withBundleAnalyzer

Question

我使用 next.config.js 中已附带的 tailwind 博客启动器启动了一个nextjswithBundleAnalyzer网站。

我现在正在尝试.mdx直接从页面获取文件。文档说我需要withMDX在我的 nextjs.config 文件中。怎样才能让两个人一起玩呢？我应该只保留其中之一还是另一个？我已经安装next-compose-plugins但不知道如何设置。

更新

这是我的下一个配置文件；它仍然失败。错误：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: undefined is not a function
    at _withPlugins (/home/xxx/xxx/nodeapps/my-web/node_modules/next-compose-plugins/lib/index.js:17:22)
    at Object.<anonymous> (/home/xxx/xxx/nodeapps/my-web/next.config.js:11:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/next-server/server/config.js:8:94)
    at async NextServer.loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/server/next.js:1:2962)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: undefined is not a function
    at _withPlugins (/home/xxx/xxx/nodeapps/my-web/node_modules/next-compose-plugins/lib/index.js:17:22)
    at Object.<anonymous> (/home/xxx/xxx/nodeapps/my-web/next.config.js:11:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/next-server/server/config.js:8:94)
    at async NextServer.loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/server/next.js:1:2962)

Answer 1

正如你提到的，你可以next-compose-plugins这样使用

const withPlugins = require('next-compose-plugins');
const withMDX = require('@next/mdx');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withPlugins([
 
  // add a plugin with specific configuration
  [withMDX, {
   // MDX plugin specific options
  }],
 
  // add it like this if no plugin configuration is needed
  [withBundleAnalyzer],
]);

编辑：这是您的完整配置文件：

const withPlugins = require("next-compose-plugins");

const withMDX = require("@next/mdx")({
    extension: /\.mdx?$/,
});
const withBundleAnalyzer = require("@next/bundle-analyzer")({
    enabled: process.env.ANALYZE === "true",
});
module.exports = withPlugins([[withBundleAnalyzer], [withMDX]], {
    pageExtensions: ["js", "jsx", "md", "mdx"],
    future: {
        webpack5: true,
    },
    webpack: (config, { dev, isServer }) => {
        config.module.rules.push({
            test: /\.(png|jpe?g|gif|mp4)$/i,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        publicPath: "/_next",
                        name: "static/media/[name].[hash].[ext]",
                    },
                },
            ],
        });

        config.module.rules.push({
            test: /\.svg$/,
            use: ["@svgr/webpack"],
        });

        if (!dev && !isServer) {
            // Replace React with Preact only in client production build
            Object.assign(config.resolve.alias, {
                react: "preact/compat",
                "react-dom/test-utils": "preact/test-utils",
                "react-dom": "preact/compat",
            });
        }

        return config;
    },
});

Answer 2

next-compose-plugins您也可以在不使用的情况下设置配置。

const withMDX = require('@next/mdx')({
  extension: /\.mdx$/,
})
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})

module.exports = withMDX(withBundleAnalyzer({
    // Your Next.js configs, including withMDX-specific options
}))