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

Question

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

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

如果我只是删除服务器配置，它就不起作用。
是否可以在 nextjs 应用程序之间使用模块联合，而无需通过文件夹路径配置远程服务器并仅通过 url 引用远程应用程序？

Answer 1

这是可能的，但它不适用于 SSR。只需将 Remote 与全局客户端分开即可:

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

创建您的组件并导入 Remote :

   // 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