处理大型项目并管理其代码库对团队来说可能是一个巨大的挑战。尽管微前端已经出现了一段时间，但由于其独特的功能和可用性，它们越来越受欢迎。

微前端特别有用，因为多个团队可以在同一个项目的各个模块上工作，而不必担心其他模块。使用微前端，将多少模块添加到当前系统并不重要。

在本文中，我们将介绍什么是微前端以及如何使用 Next.js 实现它的基础知识。我们还将讨论在您的应用程序中使用微前端的优势。

• 微前端简介

• 使用 Next.js 实现微前端

  • 先决条件

  • 设置微前端

  • 执行和结果

• 微前端的优势

  • 部署和安全

  • 可扩展性

  • 更快的发展

  • 易于测试

微前端简介

对于初学者来说，微前端不遵循任何特定的结构，也没有固定的界限。

那么微前端到底有多小？这仍然没有答案。底线是你应该拆分你的项目，这样用户体验就不会受到干扰。酷我音乐车机版App，所有歌曲都是正版音源，无视VIP限制支持无损音质下载！这个过程可能很痛苦，因为它可能包括多个白板修订。

您的项目可能会随着时间的推移而发展，您可能需要随着时间的推移修改您的微前端。

React 是一种流行的前端技术栈，以其实用性和特性而闻名。在 React 中使用微前端是一件好事！这就是 Next.js 的用武之地。

Next.js 有很多好处，包括：

• 内置路由器支持。不需要额外的包裹

• 内置 CSS 和 TypeScript 支持

• 自动设置，基于页面的路由

• 轻松构建生产

• 图像优化和国际化 SDK

• 内置无服务器功能（API 路由）

那么现在让我们看看如何使用 Next.js 创建一个微前端！

使用 Next.js 实现微前端

我们将使用模块联合，这在技术上是webpack v5 的一个特性。它允许单个应用程序的多个构建并作为整体运行。

有些人可能认为模块联合是一个新的 JavaScript 特性，但实际上它只是一种架构原则，可以从其他构建器动态加载代码。Picsart美易会员版App，专业级P图修图神器，超全面的免费手机P图软件！如果您想在现有系统中添加新的微前端，这非常棒；您可以快速执行此操作，而不会影响当前存在的内容。

先决条件

假设您的机器上已经安装了 Node，我们将构建三个 Next.js 微前端。我们将在第一个微前端中公开一个组件，并在第二个微前端中公开一个通用功能。然后，我们将在我们的第三个微前端中使用这些公开的项目，实质上使其成为每个导出模块的消费者。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

您的 Next.js 应用程序应该是 v10.2 或更高版本才能支持 webpack 5。否则，您需要使用外部包来支持模块联合。对于本教程，我使用的是 Next.js v12.2.0。

设置微前端

首先，通过运行给定的命令在一个目录中创建三个前端：

> mkdir next_microfrontend
> npx create-next-app fe1
> npx create-next-app fe2
> npx create-next-app fe3

在第一个前端，或者fe1，我们将创建一个Header将被公开的组件。我们将在文件中执行此操作src/component/Header.jsx：

import * as React from 'react'
​
const Header = () => {
  return (
    <div
      style={{
        background: 'black',
        width: '100%',
        height: '100px',
        color: 'white',
        textAlign: 'center',
        display: 'flex',
        justifyContent: 'left',
        alignItems: 'center',
        fontSize: '24px',
        paddingLeft: '15px'
      }}>
      Name
    </div>
  );
};
​
export default Header;

现在，为了让它工作，我们需要将它添加到index.js页面中：

import styles from '../styles/Home.module.css'
import Header from '../src/component/Header'
​
export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Header />
      </main>
    </div>
  )
}

如果您想查看输出，请运行npm run dev并访问http://localhost:3000/. 它应该如下所示：

现在，我们必须公开我们的组件以使其对另一个微前端全局可用。为此，我们需要进行next.config.js如下更改：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true, // Need to make it true for some versions of Next JS
  distDir: 'build', // Defined build directory
  webpack: (config, options) => { // webpack configurations
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe1",
        filename: "remoteEntry.js", // remote file name which will used later
        remoteType: "var",
        exposes: { // expose all component here.
          "./header": "./src/component/Header"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}
​
module.exports = nextConfig

当我们构建fe1时，您可以在 location 找到另一个微前端使用的 JavaScript 文件http://localhost:%5BPORT%5D/build/remoteEntry.js。

太好了，我们已经在 infe1和 in 中创建了组件fe2！我们现在将创建一个公共函数来公开。

让我们在 中创建一个函数fe2：

// utils/getSquareRoot.js
const squareRoot = (number) => {
  return Math.sqrt(number)
}
​
export default squareRoot;

现在让我们next.config.js进行相同的配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename: "remoteEntry_2.js",
        remoteType: "var",
        exposes: {
          "./squareRoot": "./utils/getSquareRoot"
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}
​
module.exports = nextConfig

一旦我们构建它，http://localhost:%5BPORT%5D/build/remoteEntry_2.js就可以使用了。

fe3让我们作为消费者来对待。我们将使用 的导出组件fe1和 的函数fe2。

首先，让我们配置next.config.js：

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  distDir: 'build',
  webpack: (config, options) => {
    config.plugins.push(
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe3",
        filename: 'static/consumerFile.js'
        remoteType: "var",
        remotes: {
            fe1: options.isServer ? path.resolve(../fe1/build/remoteEntry.js) : 'fe1',
            fe2: options.isServer ? path.resolve(../fe1/build/remoteEntry_2.js) : 'fe2',
        },
        shared: [
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
        ]
      })
    )
    return config
  }
}
​
module.exports = nextConfig

在这里，你可以看到我们remote在 webpack 配置中定义的。的工作remote是从给定的 URL 消费并为该应用提供可用的内容。Adobe2023版设计全家桶，免激活11款软件包括了PS、AI、PR、AU等通通都有！它将根据我们指定的条件接受远程或本地依赖项。

要使用该文件，我们需要更新_document.js下面列出的文件pages：

import { Html, Head, Main, NextScript } from 'next/document'
​
export default function Document() {
  return (
    <Html>
      <script src="http://localhost:3000/build/remoteEntry.js" />
      <script src="http://localhost:3001/build/remoteEntry_2.js" />
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

让我们将该模块导入index.js文件并使用它。

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Importing modules
const Header = (await import('fe1/header')).default;
const squareRoot = (await import('app1/getSquareRoot')).default;

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <Header />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
           Square root of 4: {squareRoot(4)}
        </h1>
      </main>
    </div>
  )
}

执行和结果

现在是时候检查它是否工作了。首先，构建并启动fe1和fe2. 首先fe3运行npm start dev并转到其各自的 URL 以检查输出。

哇！我们只是将两个前端代码的内容消耗到我们的主前端中！

让我们做点魔法吧。

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

---

转到fe1 → src → component并将值从 更改name为name updated。然后，重新运行f2。

fe1您无需执行任何操作即可看到更新的新代码。很神奇，对吧？

微前端的优势

简而言之，微前端使 Web 应用程序更易于维护。如果您曾经参与过大型应用程序，您就会知道管理所有内容非常乏味。

微前端的工作原理类似于分而治之的规则。现在，让我们了解使用微前端最重要和最有价值的方面。

部署和安全

微前端架构的一个显着优势是您可以将单个主体分成可以独立部署的单独部分。单独部署时，您无需处理其他部分即可维护和构建。

Vercel支持不同前端的单独存储库，无论将它们部署在一起的语言和框架如何。除此之外，您还可以使用Netlify等部署服务。部署后，您只能将其用作单独的前端。

当前端被大量受众使用时，它需要安全且健壮。为确保安全，您可以使用通配符之类的 SSL 证书或单域、多域或SAN SSL 证书。一个 SAN 或多域 SSL 证书可以保护多个站点和子域。

可扩展性

有多个使用 JavaScript 构建的框架，但是如果你想在同一个项目中让具有不同背景的开发人员保持一致，这可能吗？微前端的答案是肯定的！

您可以利用微前端架构将 React、Vue 和 Angular 组合在一个项目中。在我看来，它最终会产生最好的结果。

更快的发展

现在您知道您的团队可以独立工作。太好了，没有更多不必要的混乱！

您的团队可以随时开发和部署他们的前端。发布可以快速完成，因为与各个模块相关联的依赖项为零。

定义微前端的主要目标是更快的迭代。

易于测试

最好在进行集成测试之前测试应用程序的各个部分。在这里可以实现！

团队将在测试应用程序之前测试微前端，从而减少错误进入真实系统的机会。

除此之外，其他优点是易于维护的小型代码库以及从系统中快速添加或删除任何模块的能力。

结论

在本文中，我们讨论了微前端的概念并给出了示例。希望现在您知道它很容易采用并且具有一些很棒的功能！您可以在此处找到此项目的 GitHub 存储库。

Next.js 非常干净，遵循简单的微前端架构。我很高兴看到 Next 在微架构和使用微前端的服务器端渲染方面带来的未来。

就个人而言，我喜欢微前端编码风格，因为它很容易在团队之间维护。除此之外，前端构建和安全性也得到了相当优雅的管理。对于一个团队来说，这是一个非常令人兴奋的机会，因为在未来，这个概念可能会超越限制！

稍后，您将不会发现微前端和单一骨架系统之间有任何区别。