我创建了一个 nextjs 网站，其中包含一个 tailwind 博客启动器，该启动器已经在 next.config.js 中随附了 withBundleAnalyzer。

我现在正尝试让 .mdx 文件直接从页面运行。文档说我的 nextjs.config 文件中需要 withMDX。我如何让两者一起玩？我应该只保留一个还是另一个？我已经安装了 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)

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(
  withMDX(
    withBundleAnalyzer({
      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
      },
    })
  )
)

最佳答案

正如您提到的，您可以像这样使用 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;
    },
});

https://stackoverflow.com/questions/67135699/