时间戳

首页 > 解决方案 > Nextjs 模块与独立服务器的联合

next.js - Nextjs 模块与独立服务器的联合

问题描述

我正在尝试在 nextjs 应用程序之间使用模块联合（webpack 5）。我从这个例子（两个 nextjs 应用程序）开始，一切都按预期工作。从我的角度来看，问题在于只有当我在同一主机上同时拥有两个应用程序时，这才有效。next.config.js上的相关 webpack 配置部分如下（在其他应用程序中相同）

....
      remotes: {
        next1: isServer
          ? path.resolve(
              __dirname,
              "../next1/.next/server/static/runtime/remoteEntry.js"
            )
          : "next1",
      },
...

如果我只是删除服务器配置，它就不起作用。

可以在 nextjs 应用程序之间使用模块联合，而无需通过文件夹路径配置远程服务器并仅通过 url 引用远程应用程序？

标签： next.jswebpack-module-federation

解决方案

这是可能的，但它不适用于 SSR。只需将遥控器留给客户端的全局即可：

  // next.config.js
  ....
    remotes: {
      next1: "next1",
    },
  ...

创建您的组件并导入远程：

   // component.js
   const Component = (await import("next1/component")).default
   export default Component

最后在您的页面中，延迟加载禁用 SSR 的远程组件：

  // mypage.js
  import dynamic from 'next/dynamic'
    
  const RemoteComponent = dynamic(
    () => import('../components/component.js'),
    { ssr: false }
  )
    
  const MyPage = () => (<RemoteComponent />)
  export default MyPage

这里有一个工作示例：https ://mf-shell.vercel.app/

和代码：https ://github.com/schalela/mf-nextjs

推荐阅读