Next.js 的微前端路由问题答案

【问题标题】：Micro frontend routing issue with Next.jsNext.js 的微前端路由问题
【发布时间】：2022-08-23 01:37:49
【问题描述】：

我正在构建一个包含三个 Next.js 项目（app1、app2、base）的微前端框架。 app1 和 app2 是远程应用程序，base 是主机应用程序。

应用程序1next.config.js:

const { withModuleFederation } = require(\'@module-federation/nextjs-mf\');
module.exports = {
  webpack5: true,
  images: {
    domains: [\'static.wikia.nocookie.net\'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      mergeRuntime: true,
      name: \'app1\',
      library: {
        type: config.output.libraryTarget,
        name: \'app1\',
      },
      filename: \'static/runtime/app1RemoteEntry.js\',
      remotes: {},
      exposes: {
        \'./thanatos\': \'./components/thanatos\',
      },
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);
    if (!isServer) {
        config.output.publicPath = \'http://localhost:3001/_next/\';
    }

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

应用程序2next.config.js

const { withModuleFederation } = require(\'@module-federation/nextjs-mf\');
module.exports = {
  webpack5: true,
  images: {
    domains: [\'static.wikia.nocookie.net\'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      mergeRuntime: true,
      name: \'app2\',
      library: {
        type: config.output.libraryTarget,
        name: \'app2\',
      },
      filename: \'static/runtime/app2RemoteEntry.js\',
      remotes: {},
      exposes: {
        \'./zagreus\': \'./components/zagreus\',
      },
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);
    if (!isServer) {
        config.output.publicPath = \'http://localhost:3002/_next/\';
    }

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

基地next.config.js

const { withModuleFederation } = require(\'@module-federation/nextjs-mf\');
const path = require(\'path\');

// For SSR, resolve to disk path (or you can use code streaming if you have access)
// in production use the chunks
const ssrRemoteEntry = (app) =>
  process.env.NODE_ENV === \'production\'
    ? path.join(
        `<remotes-path>/${app}/.next/server/chunks/static/runtime/remoteEntry.js`
      )
    : path.resolve(
        __dirname,
        `../${app}/.next/server/static/runtime/remoteEntry.js`
      );

module.exports = {
  webpack5: true,
  images: {
    domains: [\'static.wikia.nocookie.net\'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      name: \'base\',
      library: {
        type: config.output.libraryTarget,
        name: \'base\',
      },
      remotes: {
        app1: isServer ? ssrRemoteEntry(\'app1\') : \'app1\',
        app2: isServer ? ssrRemoteEntry(\'app2\') : \'app2\',
      },
      exposes: {},
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

基地_document.js

import Document, { Html, Head, Main, NextScript } from \'next/document\';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <script src=\"http://localhost:3001/_next/static/runtime/app1RemoteEntry.js\" />
        <script src=\"http://localhost:3002/_next/static/runtime/app2RemoteEntry.js\" />
        <Head>
          <link rel=\"icon\" href=\"/favicon.ico\" />
          <meta
            name=\"description\"
            content=\"Demo for Microfrontends using Module Federation\"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

当我运行这三个应用程序时，在base 应用程序上我只能看到base 的页面，但是当我单击其他两个按钮时想要导航到app1 和app2，浏览器会显示空白页面。

标签： javascript webpack next.js micro-frontend webpack-module-federation

【解决方案1】：

@JavaScript Rookie：你找到解决方案了吗？

【讨论】：

这篇文章看起来不像是试图回答这个问题。这里的每一篇文章都应该是明确的尝试回答这个问题;如果您有批评或需要澄清问题或其他答案，您可以在其下方直接post a comment（如这个）。请删除此答案并创建评论或新问题。见：Ask questions, get answers, no distractions