如何使用 Next.js 进行微前端开发？-JavaScript中文网-JavaScript教程资源分享门户

前言

微前端架构正在变得越来越流行，它提供了在不同团队之间协调开发和部署单独的微服务的能力，使得前端开发更具可扩展性和灵活性。Next.js 是一个 React 框架，可以用于构建服务器渲染的 React 应用程序。它提供了强大的预渲染机制和自动代码拆分能力。本文将介绍如何使用 Next.js 来构建微前端应用程序。

前置知识

React 和 Next.js 的基本知识

步骤

步骤一：创建 Next.js 应用程序

需要先创建一个 Next.js 应用程序来承载微前端应用程序的所有部分。在创建 Next.js 应用程序之前，需要确保已安装 Node.js 和 npm。

创建一个新的项目目录，并执行以下命令：

npm init -y
npm install next react react-dom

创建名为 pages/_app.js 的文件，以重写默认的 App 组件。将以下代码添加到 _app.js 文件：

import React from "react";
import App from "next/app";

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <div>
        <Component {...pageProps} />
      </div>
    );
  }
}

这里，我们将 app.js 重写为一个简单的类组件。内部组件 Component 将是我们最终装载的微前端应用程序的根组件。

步骤二：创建微前端应用程序

需要在新项目中创建新的 React 应用程序，这将成为微前端应用程序的一部分。首先，需要创建一个包含一个 div 元素的根组件，以在 Next.js 应用程序中渲染该应用程序。为此，可以创建一个名为 MicroApp.js 的文件，其中包含以下代码：

import React from "react";
import ReactDOM from "react-dom";

class MicroApp extends React.Component {
  render() {
    return <div id={this.props.id} />;
  }

  componentDidMount() {
    const { name, url, id } = this.props;

    const scriptId = `micro-frontend-script-${name}`;

    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;
    }

    fetch(url)
      .then(res => res.text())
      .then(script => {
        const microFrontendScript = document.createElement("script");
        microFrontendScript.id = scriptId;
        microFrontendScript.innerHTML = script;
        document.body.appendChild(microFrontendScript);

        this.renderMicroFrontend();
      });
  }

  componentWillUnmount() {
    const { name } = this.props;

    const scriptId = `micro-frontend-script-${name}`;
    const microFrontendScript = document.getElementById(scriptId);

    if (microFrontendScript) {
      microFrontendScript.remove();
    }
  }

  renderMicroFrontend() {
    const { name, exposedModule } = this.props;

    window[`render${name}`](
      `${name}-container`,
      exposedModule ? { [exposedModule]: exposedModule } : undefined
    );
  }
}

export default MicroApp;

其中，我们参考了微前端架构的基本思路，通过 AJAX 请求获取渲染所需的第三方应用脚本，然后将其插入到 HTML 中运行。

要使用微前端应用程序，需要将其包含在 Next.js 应用程序中。为此，可以修改 pages/index.js 文件，如下所示：

import React from "react";
import MicroApp from "../components/MicroApp";

export default function Home() {
  return (
    <>
      <h1>Home Page</h1>
      <MicroApp
        name="MicroApp1"
        url="http://localhost:5001/remoteEntry.js"
        exposedModule="./MicroApp1"
        id="micro-frontend-1"
      />
    </>
  );
}

这里，我们在主页上渲染用于实现微前端的子应用程序，使用暴露出的对象属性控制传递给子应用程序的状态和逻辑。

步骤三：将多个微前端应用程序集成到 Next.js 应用程序中

现在，重复上一步来添加任意数量的微前端应用程序，添加它们的代码和 Next.js 页面就是唯一必需的。例如：

<MicroApp
  name="MicroApp2"
  url="http://localhost:5002/remoteEntry.js"
  exposedModule="./MicroApp2"
  id="micro-frontend-2"
/>

步骤四：创建并加载远程条目清单

当你希望在 Next.js 应用程序中加载多个微前端应用程序时，需要组织这些微前端应用程序的加载过程，并在加载完成后立即开始编写以获得最佳体验。按照「微前端架构」的说明，你需要在所有微前端应用程序之前封装统一的 remoEntry.js，然后带上一些必要的额外代码，如预览可能适用的通信或初始化逻辑。例如：

import { registerMicroApps, start } from "qiankun";

const loaders = {
  MicroApp1: () =>
    import(
      "http://localhost:5001/MicroApp1.js"
    ),
  MicroApp2: () =>
    import(
      "http://localhost:5002/MicroApp2.js"
    )
};

registerMicroApps(
  [
    {
      name: "MicroApp1",
      loader: loaders.MicroApp1,
      activeRule: "/micro-app1"
    },
    {
      name: "MicroApp2",
      loader: loaders.MicroApp2,
      activeRule: "/micro-app2"
    }
  ],
  {
    beforeLoad: [
      app => {
        console.log("[LifeCycle] before load %c%s", "color: green;", app.name);
      }
    ],
    beforeMount: [
      app => {
        console.log("[LifeCycle] before mount %c%s", "color: green;", app.name);
        return new Promise(resolve => {
          setTimeout(resolve, 5000);
        });
      }
    ],
    afterUnmount: [
      app => {
        console.log("[LifeCycle] after unmount %c%s", "color: green;", app.name);
      }
    ]
  }
);

start();

步骤五：运行 Next.js 应用程序

启动 Next.js 应用程序以查看微前端应用程序是否正在加载，或在生产中使用 nginx 之类的反向代理服务器进行部署。通过访问 http://localhost:3000/，应该能够看到渲染结果。

总结

使用 Next.js 实现微前端化很简单，它提供了强大的预渲染机制和自动代码拆分能力。还可以使用框架来协调子应用程序之间的交互。通过使用这个教程的步骤，你应该可以创建一个可以轻松管理和组织多个微前端应用程序的应用程序，不仅仅是在开发时，在部署过程中也非常灵活。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a8278dadd4f0e0ff14b4b5

如何使用 Next.js 进行微前端开发？

前言