Next.js 14 App目录集成Module Federation报错及适配方案咨询

我用Next.js 14.2.5结合Module Federation开发微前端，通过以下命令创建了两个App目录结构的项目：

npx create-next-app mf-host
npx create-next-app mf-widgets

mf-widgets 的 next.config.mjs：

/** @type {import('next').NextConfig} */
import { NextFederationPlugin } from '@module-federation/nextjs-mf';

process.env.NEXT_PRIVATE_LOCAL_WEBPACK = true;

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["ui"],
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'widgets',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          './TopNavigation': './components/topNavigation/TopNavigation',
        },
      })
    );
    return config;
  },
};

export default nextConfig;

mf-host 的 next.config.mjs：

/** @type {import('next').NextConfig} */
import { NextFederationPlugin } from '@module-federation/nextjs-mf';

process.env.NEXT_PRIVATE_LOCAL_WEBPACK = true;

const WIDGETS_APP_URL =
  process.env.NEXT_PUBLIC_WIDGET_APP_URL || 'http://localhost:3000';

const remotes = (isServer) => {
  const location = isServer ? 'ssr' : 'chunks';
  return {
    widgets: `widgets@${WIDGETS_APP_URL}/_next/static/${location}/remoteEntry.js`,
  };
};

const nextConfig = {
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'host',
        filename: 'static/chunks/remoteEntry.js',
        remotes: remotes(isServer),
      })
    );
    return config;
  },
};

export default nextConfig;

启动mf-widgets时触发错误：

▲ Next.js 14.2.5
Local: http://localhost:3000
✓ Starting...
Error: App Directory is not supported by nextjs-mf. Use only pages directory, do not open git issues about this at NextFederationPlugin.validateOptions...

我尝试直接把App目录改名为pages，访问宿主应用时出现404错误。现在想知道：

1. 有没有办法让nextjs-mf适配App目录？
2. 如果必须切换回Pages目录，正确的操作步骤是什么？
3. 还有哪些其他可行的解决途径？

1. 尝试适配App目录的方法 #

当前官方@module-federation/nextjs-mf未正式支持App Router，但部分新版本已提供实验性支持：

• 升级到@module-federation/nextjs-mf@>=0.13.0，在插件配置中启用App Router实验开关：

  new NextFederationPlugin({
    name: 'widgets',
    filename: 'static/chunks/remoteEntry.js',
    exposes: {
      './TopNavigation': './components/topNavigation/TopNavigation',
    },
    experimental: {
      appDir: true // 启用App Router实验支持
    }
  })
  

• 注意：实验性支持可能存在SSR渲染异常、缓存失效等问题，生产环境需充分测试验证。

2. 切换回Pages目录的正确步骤 #

直接重命名App为pages会导致路由失效，需按以下步骤完整重构：

• 调整目录结构
  • 将app/page.js移动到pages/index.js，并确保组件为默认导出
  • 其他路由文件如app/about/page.js需改为pages/about.js
  • 删除app/layout.js，若需全局布局，创建pages/_app.js并配置全局组件包裹逻辑；创建pages/_document.js配置HTML基础模板
• 修复路由与导入
  • 页面跳转改用Pages Router版的next/link（如<Link href="/about">About</Link>）
  • 确保所有页面组件均为默认导出
• 重置依赖与启动

  rm -rf node_modules .next package-lock.json
  npm install
  npm run dev
  

3. 其他可行解决途径 #

• 采用Webpack原生Module Federation：手动配置Next.js的webpack，处理SSR、静态资源等细节，适合有自定义配置能力的场景
• 切换微前端方案：改用Single SPA、Tailor.js等适配Next.js的微前端框架
• 组件npm包共享：放弃Module Federation，将微前端组件打包为独立npm包，通过依赖安装方式共享，适合组件变更频率低的场景

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