在本文中，我们将从流行度、文档和性能方面比较React和Next.js。您将根据所构建的应用程序的规模和预期用途，从中获得如何在它们之间进行选择的有用视角。

Web技术不断发展壮大。尽管JavaScript生态系统发生了变化，React和Next.js仍然是值得选择的选项，它们已经持续了很长一段时间。

作为一名JavaScript开发人员，很可能你最近开始使用React，或者已经使用了一段时间，你也在考虑Next.js。了解每个选项的利弊对于做出正确选择至关重要。

我们与ThemeChoice合作撰写了这篇文章。感谢您支持使SitePoint成为可能的合作伙伴。

什么是React？

根据React官方文件：

React是一个用于构建用户界面的声明性、高效和灵活的JavaScript库。它允许您用被称为“组件”的小而独立的代码片段组成复杂的UI。

它由Meta以及个人开发者和公司社区维护。其目标是帮助开发人员轻松地为网站和应用程序快速创建用户界面。React的主要概念是虚拟DOM，其中UI的“虚拟”表示保存在内存中，并通过ReactDOM等库与“真实”DOM同步。可以使用React开发单页、移动和服务器渲染的应用程序。

然而，React只关心状态管理和将状态呈现给DOM，因此创建React应用程序通常需要使用额外的库进行路由搭建，以及某些客户端功能。

什么是Next.js？

维基百科是这样介绍Next.js的:

Next.js是一个由Vercel创建的开源web开发框架，支持基于React的web应用程序和服务器端渲染并生成静态网站。

Next.js为您提供了生产所需的所有功能的最佳开发体验：混合静态和服务器渲染、TypeScript支持、智能绑定、路由预取等。不需要配置。React文档将Next.js列为“推荐的工具链”之一，建议使用Node.js构建服务器渲染的网站。

Next.js的主要功能是使用服务器端渲染来减轻web浏览器的负担并提供增强的安全性。它使用基于页面的路由以方便开发人员，并支持动态路由。其他功能包括热模块更换，以便可以实时更换模块，自动代码拆分（仅包括加载页面所需的代码），以及页面预取以减少加载时间。

Next.js还支持增量静态再生和静态站点生成；网站的编译版本通常在构建时构建，并保存为.next文件夹。当用户发出请求时，预先构建的版本（即静态HTML页面）将被缓存并发送给他们。这使得加载时间非常快，但它并不适合每个网站，例如经常更改并使用大量用户输入的交互式网站。

为了制作专业且响应迅速的web应用程序，建议使用现成的Next.js管理模板，尤其是在使用新框架或库时。当从头开始时，这些模板可以大大降低开发成本和时间。

材料：MUI React NextJS管理模板

Materio建立在Next.js和MUI之上。除此之外，它还提供TypeScript和JavaScript版本。它对开发人员友好，功能丰富，并具有高度可定制的管理仪表板，用于构建优质、高性能的web应用程序，如SaaS应用程序、电子商务应用程序、健身应用程序、CRM项目等。

要获得更好的概述，请查看MUI演示。

特征：

• 使用Next.js构建
• 基于React
• 使用MUI core v5稳定版构建
• 100%React钩子和功能组件
• Redux工具包和React上下文API
• React钩子形式加上Yup
• ESLint 和 Prettier
• 支持RTL布局
• JWT身份验证
• 支持深色和浅色布局

Next.js和React的区别

现在，您已经对Next.js和React有了足够的了解。让我们并排比较一下，列出所有的区别。

React和Next.js的优缺点

在查看了上面的并排比较之后，您可能对应该选择哪个框架有了一些想法。但让我们更详细地看一下每个框架的利弊。

React的优点和缺点

React的优势：

• 易学易用
• 使用虚拟DOM
• SEO友好
• 提供可扩展性
• 具有干净的抽象
• 拥有一个庞大而乐于助人的社区
• 拥有丰富的插件生态系统
• 提供了出色的开发工具

React的缺点：

• 发展速度很快
• 缺少良好的文档
• 具有滞后的SDK更新

Next.js的优点和缺点

Next.js的优点：

• 提供图像优化
• 提供国际化服务
• 具有零配置
• 具有快速刷新
• 混合：SSG（静态站点生成）
• 具有API路由
• 提供内置CSS支持
• 支持TypeScript
• 提供增强的用户体验
• 对SEO友好

Next.js的缺点：

• 插件生态系统很差
• 没有内置状态管理器
• 具有基于文件系统的路由

Next.js和React哪个更好？

这不是一种选择，因为React是一个用于构建UI的库，而Next.js是一个基于React构建整个应用程序的框架。

该问题应始终在应用程序的项目需求中提出。

React有时比Next.js更合适，反之亦然。以下用例将帮助您决定使用哪一个以及何时使用。

您应该何时使用React?：

• 当您需要高度动态的路由时
• 当您已经熟悉JSX时
• 当您需要脱机支持时

什么时候应该使用Next.js？：

• 当您需要一个包罗万象的框架
• 当您需要服务端渲染时
• 当您需要后端API端点时

总结

尽管React很受欢迎，但Next.js提供了服务器端渲染、快速加载速度、SEO功能、基于文件的路由、API路由以及许多独特的开箱即用功能，使其在许多情况下成为非常方便的选择。您可以使用React实现同样的功能，它提供了更多的控制和可定制性，但需要手动配置。

本文由大前端学堂编译出品，原文来自sitepoint，若转载请注明出处，转发感激不尽。