Next.js 13如何用不同配置生成两种构建并实现Sidecar微前端模式

我们需要在Next.js 13项目中实现微前端集成的Sidecar模式，核心目标是通过不同文件夹下的next.config.js文件生成两类构建产物：

• 一类是可独立运行的完整应用
• 另一类是作为微前端（MFE）的组件包

当前采用@module-federation/nextjs-mf（next-mf）实现模块联邦，对应的Webpack配置代码如下：

webpack: (config, options) => {
        config.resolve.fallback = { fs: false };
        if (!options.isServer) {
            config.plugins.push(
                new NextFederationPlugin({
                    name: 'demoapp',
                    filename: 'static/chunks/demoapp.js',
                    exposes: {
                        'demo-component':
                            'src/components/mfe/demo.tsx',
                    },
                    shared: {
                        react: {
                            singleton: true,
                            requiredVersion: false,
                            eager: true,
                        },
                        'react-dom': {
                            singleton: true,
                            requiredVersion: false,
                            eager: true,
                        },
                        
                    },
                    extraOptions: {
                        debug: true,
                    },
                }),
            );
        }
        return config;
    },

内容的提问来源于stack exchange，提问作者Zala Nilesh