如果想通过专栏的形式查看本次项目实践可以点击查阅Next 图册目实践

通过之前的栏目学习，我们已经可以对数据进行 CRUD 操作,已经可以开发一些实际的基础功能了，在实际开发中，我们不可能只使用一个组件，而是需要使用大量的组件，来完成一个页面。

相信在国内的小伙伴在使用 React 开发的过程中，通常我们用的最多的是由支付宝蚂蚁团队出品的 ant design(简称：Antd)。Antd 是一款很不错的组件库，但它不是一款好的 SSR 组件库。如果你是做 SPA，Antd 是很好的选择，但如果你是做 SSR，Antd 就不是很合适了。

本文主要介绍 Next.js 实战开发 SSR 场景下，推荐的 React UI 组件库，让你的开发效率飞升！

next.js 是一个用于在服务器端渲染 React 应用程序的框架。所以一般来说服务在没有浏览器客户端 API 的情况下，服务端都是以 HTML 的方式进行操作的。但是 antd 的组件以来确邦定了很多客户端的 api。在 next.js 并不是一件很 unusual 的事情。

在 next.js 中，梦兽编程会推荐国外的 ui 框架。因为国外的人们开发组件库的思维和国内不同，他们更注重客观规律的发展并且很死板的按照规范制作，所以他们很多 React ui 框架使用下来的体验很想在写 HTML 一样。而国内的 React ui 追求的是灵活性，能用一个上下文解决的事情一定不会分开两个写。且巧的是 Next.js 这么做只会变得很复杂。

有那些 React ui 组件库 值得关注的呢？

Next.js

无论你是初学者还是经验丰富的开发者，都可以借助 NextUI 轻松构建网站和应用。NextUI 是一款现代的、快速的、美观的 React UI 库，你可以立即开始使用。

这个工具看起来非常有前途，它的所有特性、提供的功能和界面都非常出色。它的组件支持在不同的浏览器中进行服务器端渲染。

特性和优点包括：

• 更快：NextUI 在运行时消除了不需要的样式属性。这使得这个工具的性能优于其他 React UI 库。
• 独特的 DX：NextUI 完全是类型化的，这有助于减少学习曲线，同时提供更好的开发者体验。此外，开发者不需要导入多个组件来展示一个。因此，你可以通过编写更少的代码来做更多的事情。
• 浅色和深色 UI：你将获得自动识别深色模式的功能。NextUI 可以通过检测 HTML 主题中的属性变化自动改变你的主题。其默认的深色主题规模适中，易于应用，编码量少。
• 可主题化：它提供了一种简单的方式来自定义默认主题。你可以轻松修改字体、颜色、断点等。
• 定制化：由于 NextUI 是在 CSS-in-JS 库 Stitches 之上开发的，所以很容易通过 CSS 属性、原生 CSS 选择器或样式化函数来定制组件。此外，你还将获得一套开箱即用的 Stitches 实用程序，通过将 CSS 属性组合在一起、缩短 CSS 属性或简化复杂语法来加速你的工作流程。
• 服务器端渲染：NextUI 的组件支持跨浏览器的服务器端渲染，你可以轻松地应用到你的应用程序中。
• 可访问性：NextUI 的所有组件都遵循 WAI-ARIA 指南，并提供键盘支持。用户还可以在使用屏幕阅读器或键盘导航时查看焦点环。它也与 Next.js 兼容。

NextUI 在 GitHub、Twitter 和 Discord 上有一个广大的社区，你可以加入并寻求帮助，分享你的反馈和技巧。

Mui

Material-UI（MUI）是一个功能齐全的 UI 组件库，提供了一整套 UI 工具，可以快速创建和部署新功能。它是目前最强大和最受欢迎的 UI 组件库之一，每周在 npm 上有超过 320 万次下载，GitHub 上有 78k 星，Twitter 上有 17k+的关注者，以及 2.4k+的开源贡献者。

目前梦兽编程用的比较多的 ui 框架，主要因为它的兼容性强，兼容所有设备。css in js 的特性迁移性强，自定义组件样式非常容易。

特性和优点包括：

• 永恒的美学：你可以使用 MUI 轻松构建精美的 UI。你可以选择从 Google 的 Material Design 开始，或者从零开始自己创建高级主题。
• 直观的定制：这个工具提供了强大而灵活的组件，让你对项目的外观和感觉有完全的控制。
• 生产就绪的美丽组件：使用美丽而强大的材料设计组件（如按钮、文本、菜单、警告、表格等）创建你梦想中的最佳设计。你也可以按照你喜欢的方式定制它们。
• 更好的可访问性：提高可访问性是这个工具的核心优先事项之一。因此，你构建的任何功能都将快速地为用户提供，以提高他们的用户体验。
• 无与伦比的文档：MUI 配备了由 2000+贡献者创建和管理的全面文档。在这里，你可以轻松理解这个工具以及如何使用它。如果你有任何疑问，这份文档将在那里帮助你。

最好的是，你可以永久免费使用 MUI 的基本功能。对于高级功能，你可以选择从每月 15 美元/开发者开始的付费计划(主要是一些数据表格，也可以使用ag-grid开发代替)

Fluent

Fluent 是一个跨平台的开源设计工具，可以帮助你创建引人入胜的用户体验。它之前被称为 Fabric React，是由微软创建的优秀 UI 库。

几乎和原生差不多，使用起来是 0 成本

开发者和设计师可以利用其有用的工具向他们的应用程序添加设计元素，而无需从头开始创建。这个工具强大且直观，能够根据用户的意图和行为进行调整。无论你使用什么设备，使用 Fluent 都感觉自然，无论是 PC、笔记本电脑还是平板电脑。

如果你正在创建跨平台应用，Fluent 是最好的工具之一。然而，它也适用于其他项目。

特性和优点包括：

• 预构建的组件：Fluent 提供多个预构建的组件，帮助你用 Microsoft Office 的设计语言开发应用程序的不同部分。它包括按钮、网格、复选框、通知、菜单、基本输入、工具箱等组件。你也可以轻松定制它们以适应你的用例。
• 控制：你可以使用 Datepickers、people pickers、persona 等工具更好地控制你的设计。
• 可访问性：Fluent 是以易于访问为目标创建的，任何用户都可以无障碍地访问和使用它。
• 跨平台：它适用于所有平台，无论是 web、iOS、macOS、Android 还是 Windows。它也兼容 Microsoft 的产品，如 Office 365、OneNote、Azure DevOps 等。
• 性能：你从 Fluent 使用的每个组件来构建应用程序部分都将表现得最佳。它将为你的应用程序提供专业而用户友好的外观和感觉。此外，它通过对每个元素应用 CSS 采取了直接的方法。因此，即使你改变一个元素，也不会影响你的样式。

由于它是开源的，你可以使用代码并根据你的需要进行修改。然而，它可能缺乏深入的文档。但是如果你需要帮助，互联网上有其他资源和博客文章可供参考。因此，它最适合有一些先前经验的开发者和设计师。

Mantine

Mantine 是一个功能齐全的 React UI 组件库，你可以使用它快速开发你的网页应用和网站。它旨在使你的应用可访问和灵活，并提供 40+的钩子和 100+的可定制组件。

这个工具是开源的，免费的，其包括 MIT 许可证。它基于 TypeScript 并支持多个框架。

特性和优点包括：

• 组件：Mantine 有 100+的组件，包括 20 多个输入组件、轮播、文本编辑器、日期选择器、覆盖层和导航。它支持基于 Embla 的轮播，基于 Quill 的文本编辑器，并让你轻松调整你的内容。你还可以改变颜色、搜索项目、使用自动完成等等。
• 深色主题：你可以通过少量编码为你正在构建的应用添加深色主题。Mantine 可以为深色和浅色主题 alike 导出全局样式。
• 定制：Mantine 中的每个组件都可以通过 props 在视觉上进行定制。这有助于你快速构建原型，并通过修改 props 进行实验。
• 样式覆盖：Mantine 允许通过内联样式或类覆盖每个内部元素的样式。当你可以使用这个特性以及其他定制灵活性时，你可以应用任何你想要的视觉变化，并满足你的设计需求。
• 灵活的主题：你不必限制自己使用默认主题；你可以通过添加额外的颜色、半径、间距、字体等来扩展它，以补充你的设计。
• 其他特性：Mantine 包含的其他重要特性包括自动供应商前缀、懒评估、在服务器端渲染期间提取关键 CSS、动态主题等。
• 集成：Mantine 适用于现代环境，包括 Gatsby.js、Next.js、Remix、create-react-app 或 Vite。

Mantine 在 Discord 上有一个社区，你可以加入其中，提问、查看最近的开发情况，参与特性讨论。它也在 GitHub 上可用于讨论和分享反馈。你还可以在 Twitter 上关注 Mantine，以便及时了解更新。

Blueprint ERP 中台首选

Blueprint 是一个基于 React 的 UI 工具包，你可以使用它来构建你的网页应用。它是在 Palantir 创建的一个开源项目，Palantir 是一个通过应用与数据交互来提升客户体验的组织。

如果你正在构建数据密集和复杂的界面，这个工具将非常适合你。它也主要用于桌面应用。这个组件库在 GitHub 上有超过一千颗星。

特性和优点包括：

• 对开发者友好：Blueprint 提供了一个复杂的 UI，让开发者可以轻松地构建具有多个组件和模块的重型、功能丰富的网页界面。开发者非常喜欢它，其中一个原因是 Blueprint 提供了 25+的标准组件。
• 组件：它提供了创建和显示按钮和 300+可修改图标的代码片段，与时间和日期进行交互，选择时区等。除此之外，你还会得到面包屑、呼出、分隔符、按钮、导航栏、卡片、标签、标签页等选项。
• 定制：开发者可以使用 CSS 和客户每个组件，轻松地适应他们的项目需求。
• 主题：它没有不同种类的主题，但你会得到独特的深色和浅色模式主题，以及颜色方案、类、排版等设计元素。
• 可访问性：许多用户认为 Blueprint 是最可访问的库之一。你可以在命令提示符中通过 npm 轻松安装它。
• 实时合成：使用一个工具，Composer，将帮助你进行实时合成，提升你的应用的用户界面。
• 其他特性：它有其他有用的特性，如像素流、捕获混合现实、创建魔法跳跃、多用户编辑、全景捕获、混沌破坏等。

Blueprint 的文档非常优秀，包括深入的教程，开发者可以通过阅读这些教程来掌握这个库。由于它缺乏支持选项，你可以在 Stack Overflow 和 Blueprint 的 GitHub 仓库上寻求帮助，这个仓库有活跃的贡献者。

总的来说，选择哪个 React UI 库取决于你的项目需求和个人喜好。NextUI、MUI、Fluent、Mantine 和 Blueprint 都是优秀的选择，每个库都有其独特的特性和优点。无论你是在寻找丰富的组件库，还是需要高度可定制的主题，或者是对性能有特殊要求，你都可以在这些库中找到满足你需求的工具。最重要的是，这些库都有活跃的社区和详细的文档，可以帮助你更好地理解和使用它们。

感谢你的阅读，期待在下一篇文章中再次见到你！

这里是梦兽编程，本次的代码更新将会放在Github本次项目的Github连接中的V3.0分支中

我的B站视频号更多视频动态。