Next.js App Router下无@module-federation/nextjs-mf实现模块联邦方案咨询

方案分析与选择 #

方案1：App Router转Page Router #

• 优势：直接复用已跑通的Page Router + Module Federation Demo，无需额外研究Webpack原生配置，学习成本低，兼容性有保障。
• 劣势：需重构项目目录结构，适配Page Router的路由、数据获取逻辑（比如从组件内async/await转为getServerSideProps/getStaticProps），项目规模大的话重构工作量大，还可能影响现有功能稳定性。
• 适用场景：项目规模较小，或近期无App Router深度迭代计划，优先快速实现组件共享需求。

方案2：Webpack原生Module Federation实现 #

• 可行性：完全可行，Next.js基于Webpack构建，App Router下可通过自定义Webpack配置启用原生Module Federation，核心逻辑和普通React项目一致，只需适配Next.js构建特性。
• 优势：无需重构现有App Router项目，保留原有架构，符合长期技术路线。
• 劣势：需手动配置Webpack，处理Next.js构建缓存、客户端/服务端构建差异，踩坑成本较高。

方案2核心实现步骤 #

1. 配置Next.js的Webpack（next.config.js） #

在配置中区分客户端与服务端构建，仅在客户端启用Module Federation：

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.plugins.push(
        new require('webpack').container.ModuleFederationPlugin({
          name: 'nextHost', // 当前项目的联邦标识
          filename: 'remoteEntry.js', // 远程入口文件名
          exposes: {
            // 暴露需要共享的客户端组件，路径需准确
            './SharedButton': './app/components/SharedButton.client.js',
          },
          shared: {
            react: { singleton: true, requiredVersion: '^18.2.0' },
            'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
          },
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

2. 处理客户端组件导出 #

App Router中共享组件必须是客户端组件，需在组件文件顶部添加指令：

'use client';

export default function SharedButton() {
  return <button>共享按钮</button>;
}

3. 消费端（React项目）配置 #

在消费端Webpack配置中添加Module Federation：

module.exports = {
  plugins: [
    new require('webpack').container.ModuleFederationPlugin({
      name: 'reactConsumer',
      remotes: {
        nextHost: 'nextHost@http://localhost:3000/remoteEntry.js', // 指向Next.js项目的远程入口
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

在消费端组件中导入使用：

import React, { lazy, Suspense } from 'react';

const SharedButton = lazy(() => import('nextHost/SharedButton'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <SharedButton />
    </Suspense>
  );
}

export default App;

关键注意事项 #

• 仅客户端组件可通过Module Federation共享，App Router的服务端组件无法跨项目共享。
• 配置shared时设置singleton: true，避免多React实例导致的hooks错误。
• 修改Webpack配置后建议重启Next.js开发服务器，避免缓存问题。

内容的提问来源于stack exchange，提问作者Saravanan R