3,000+ 字阐述为何应该使用 Next.js

简而言之：在本文中，我认为对于了解 React 的人来说，最好从一开始就使用 Next.js。我们还会解释为什么这是一个合理的财务决策。免责声明：并非每个人都必须使用 React/Next.js，它也不是适合所有用例。享受这篇文章🙂

我最初在https://nextjsnotes.com/why-nextjs/上发表了这篇文章

Next.js 是一个快速发展的 React 框架，目前已有近10 万个代码库在使用 [来源]。Next.js 拥有丰富的功能，深受IndieHackers和财富 500 强企业的青睐。您可以查看其展示中的大量网站。

这篇文章是一项调查，试图回答以下问题：

• 为什么选择 React？
• 是什么让 Next.js 成功？
• Next.js 的优缺点是什么？

首先，为什么要使用 React？

要了解 Next.js 的成功，我们首先需要看看 React 的成功。

数字

React真的那么受欢迎吗？我们来看看一些数据。

安装

截至撰写本文时，React 每周安装量约为775 万次，并且依赖超过390 万个GitHub 存储库[安装源，依赖源]。

有很多事情npm install react@latest正在发生。

如果我们回顾npmtrends.com上每周的下载量指标，React 的领先优势是惊人的。

从该图中可以看出三点：

1. 哇，十二月一切真的都停止了。
2. GitHub 星标的意义比你想象的要小。
3. 由于分裂（angular.js 与 angular 解释），Angular 很难衡量。

我从 2017 年末开始使用 React 构建应用程序。直到 2018 年中期，我的工作才完全采用 React，并开始构建可共享的内部组件库。

说到工作，我们就来说说就业。

工作

另一个衡量受欢迎程度的指标是与框架相关的工作数量。

在 Google 上搜索“React 工作”会产生大量结果：截至撰写本文时，结果为 293,000,000 个。

查看 LinkedIn、Indeed 和其他一些求职网站，了解有多少种选择。

那么就业人数为什么重要呢？

这表明存在需求。需求确保五年后你能够聘请到了解该框架的开发人员。

虽然这对您来说可能并不重要，但企业需要考虑招聘能力。

我们应该考虑工作数量和经常使用该框架的人们的幸福感。

根据2019 年 Stack Overflow 开发者调查，React 在“最受喜爱的 Web 框架”中排名最高。

2019 年 JS 状况调查显示，尽管有一些批评者，但仍有大量人正在使用 React，并且不介意再次使用它。

结论

数据显示，React 在 Web 框架领域占据主导地位。开发者们渴望学习 React，并且普遍坚持使用它，这既是因为就业市场的原因，也是因为它的技术基础。

技术

在谈论一个框架时，我们不能不提及其技术基础的一些关键方面以及它们如何促成其成功。

反应：

• 专注于一件事（视图层）
• 支持组件化思维与分享
• 简化数据流

专心做好一件事

React 成功的秘诀之一就是专注于一件事，并把它做到极致。React 的重点就印在他们的主页上：

用于构建用户界面的 JavaScript 库

这听起来可能很简单，但却至关重要。

通过专注于一件事，React 能够坚持不懈地迭代其核心使命。

React 不关注：

• 数据获取（axios、fetch、superagent、SWR）
• 高级状态管理（redux、recoil、react-query）
• 处理样式（styled-components、styled-jsx）

React 只关注视图层。

这使得框架擅长构建用户界面，同时忽略所有其他问题。

开源社区

React 忽略了很多问题，造成了社区的空白。开发者们很乐意用他们的解决方案填补这个空白，并将其贡献给社区。

许多公司有意这样做。

• Salesforce 可以添加用户要求的所有功能，或者他们可以继续让第三方开发人员构建这些解决方案。
• Shopify 可以添加所有必要的功能来运行您能想到的任何商店，或者他们可以让第三方开发人员围绕他们构建一个强大的生态系统。

React 周围的开源软件是天然的护城河。（什么是经济护城河？）

作为一名开发者，它帮助我更快地完成工作（而且很可能质量更高）。每个开源软件包都包含几百行代码，并非由我的团队编写或维护，但我们却受益于其庞大的贡献者列表。

单向绑定与双向绑定

我使用 Knockout、Angular 和 React 构建过单页应用程序 (SPA)。React 处理数据和 DOM 的方式完全不同。

React 使用单向数据绑定，而 Knockout 和 Angular 采用双向数据绑定方法。

单向数据绑定使得数据如何在应用程序中流动的思考变得更加直接。

React 团队的文档对此的解释比我想象的要好得多👇

（https://reactjs.org/docs/hello-world.html）

其他技术原因

还有许多其他因素使得 React 成为一个优秀的框架选择。本文不会深入探讨这些因素。

这是一个商业决定

Patrick McKenzie（@patio11）在 2011 年的一篇题为“不要称自己为程序员，以及其他职业建议”的文章中对此进行了最好的阐述：

工程师的职责是创造商业价值，而不是编写程序

React 为企业提供了许多价值：

• 就业市场上有很多 React 开发人员
• 社区支持和生态系统使我的团队的工作变得更简单
• 它可能会存在很长一段时间（以 JS 框架的生命周期为基准）

这具有商业意义。

换句话说，从财务角度来说，使用 React 是一个合理的决定。

我知道这

重要的是团队的效率。在业余项目上，我是一个团队。所以我的最终答案是：

我在项目中使用 React 是因为我了解它。

React 是我进入 Next.js 的门户。

Next.js 的演变

我有一个关于应用程序的想法

让我们一起开始一个新项目，作为为什么需要 Next.js 和 Gatsby 等框架的示例。

以下是我们的项目简介：

建立一个网站，根据您当前的财务状况和房价计算您是否应该买房。

该应用程序需要：

• 获取用户数据
• 计算结果
• 制作可共享的结果页面

我们的要求总体来说听起来很简单，所以我们从create-react-app开始——这是使用 React 开始构建的最简单方法。

我们推出了我们的应用程序，它在 Product Hunt 上取得了巨大的成功🎉

因此，我们决定加倍努力，努力推广产品。那么，我们该怎么做呢？我们的Lighthouse审核结果非常糟糕。我们也没有任何内容页面。谷歌不知道我们的网站是关于什么的，因为我们没有提供任何额外的内容。修复这些问题或许可以提高我们的SEO。如果我们把这些都做好，谷歌或许能给我们带来更多流量。

我们的最终目标只有一个：

让网站尽快呈现给我们的用户和 Google

我们从基本的性能调整开始：

• 缓存尽可能多的资产
• 通过 CDN 从边缘提供资产
• 消除膨胀node_modules
• 延迟加载图像

这些改进虽然在一定程度上解决了问题，但并没有解决现代 Web 开发中的问题：我们的代码包太大了。速度较慢的计算机和手机很难处理所有的 JavaScript。

苏维埃社会主义共和国

一个解决方案？只需在服务器上处理 JavaScript 并交付 HTML/CSS。这就是服务器端渲染 (SSR)。

一旦客户端收到此有效负载，我们就可以在后台更新 React 应用的状态。用户（无论是人类还是 Google 机器人）都能看到更快的响应，并更轻松地浏览页面。

如果我们在服务器前面放置一个缓存（使用 Cloudflare 或其他提供商），我们可以显著提高缓存命中用户的性能。

慢慢地，人们厌倦了实现 SSR。Next.js 的出现就是为了填补这个痛点。

萨格

另一种选择是在构建时简单地处理 JavaScript，并且只向客户端发送少量数据。这种方法称为静态站点生成 (SSG)。

SSG 有以下要求：

• 所有数据都需要在构建时存在
• 改变网站意味着重建它
• 更长的构建时间

根据您正在构建的站点，这些要求是非常可行的。

与 SSR 一样，SSG 的用户并不喜欢做这项工作，但这却是至关重要的开发。Gatsby的出现正是为了填补这一空白。

注意：通过 getStaticProps、getStaticPaths，Next.js 已涉足 SSG + SSR。

（几乎）我的第一个 Next 应用

2018 年，我在Spreetail工作。当时，公司正在打造自己的电商体验（而不是一贯的 B2B 业务）。

在项目初期，我们认为 Next.js 框架“太过青涩”，所以没有选择它（大约在5.1版本）。当时有一位工程师坚信这是正确的方向，但我们（我）没有听从他的意见。抱歉，Michael。

我以前的同事 Stephen 写下了他将数月的 React 开发迁移到 SSR 的英勇努力。

这需要做很多工作。

在现有的 React/Redux 应用程序中实现服务器端渲染

我们决定使用基于react-boilerplate构建的 React/Redux 应用程序。我签约时开发工作已经开始，但我知道我们之前考虑过Next.js，但最终决定不使用它。现在回想起来，使用已经处理过服务器端渲染的框架要容易得多。我以后会倾向于使用这些框架。

我非常尊重斯蒂芬的意见，这促使我出于工作和业余项目的目的研究 Next.js。

从那时起，我在每个新建项目中都使用了 Next.js。

Next.js 的优点

让我们深入了解 Next.js 中我最喜欢的一些部分，以及为什么它是我在工作和业余项目中首选的框架。

用户（开发者）痴迷

倾听痛点

Next.js 的拉取请求经常包含推文链接。我认为这是个好兆头。这表明他们正在倾听客户的意见。

新版 Next 遇到问题？请发推文联系团队。您很可能会收到详细的回复以及解决问题的步骤。仍然无法正常工作？与您联系的开发人员很可能会提交 Github 问题，并链接到您的 Twitter 帖子。

这是免费软件的非凡客户服务（稍后会详细介绍 OSS 优势）。

详细示例

在撰写本文时，存储库中有231 个高质量的 Next.js 示例。

从 Auth0 到 XState，他们拥有您能想到的一切。发现他们缺少什么了吗？太棒了！Next.js 是一个开源仓库。提交您的示例，让社区帮助您不断改进。

这些例子为我节省了无数的时间。

表现

静态===速度

随着 Next.js 添加getStaticProps、getStaticPaths以及创建增量静态再生 (ISR)，Next 正在成为一个令人难以置信的静态站点框架。

我在上一期的新闻通讯《下一个网站应该是静态的》中多次谈论了这一点。

嘿——我们来谈谈静态网站

注意：ISR 需要一些配置，并且并非所有托管服务提供商都默认启用。如果您对此功能感兴趣，请考虑在 Vercel 上托管。

SSR 速度很快（使用缓存）

如果您在服务器端渲染您的应用程序，那么您的用户可能会非常快地体验到它。

在我们上面讨论的例子中，SSR 提供​​：

• 通过更小的初始有效载荷（首次内容绘制）实现更快的FCP
• 更好的整体页面加载速度
• 通过发送可解析的 HTML 来改进 SEO

SSR 的一个缺点是服务器可能需要一段时间来呈现页面并做出响应。

通过在服务器和用户之间插入Cloudflare（或其他缓存），您可以降低用户在服务器上等待的机会。

注意：这最适合于营销页面和不会因用户而异的内容。

商业价值

搜索引擎优化

考虑到 Next.js 同时支持 SSG 和 SSR（两种改善 SEO 的关键方法），如果您非常关注 SEO，那么 Next 是一个很好的选择。

附言：如果您正在创业，SEO 对您来说是一个重要的关注点。

开发人员速度

与所有之前的框架类似，Next.js 也有自己的观点。这些观点（无论好坏）都融入了我们使用该工具的方式。这乍一听可能不太好，但我认为这很棒。

通过坚持己见，Next.js 使我们免于实现基本的事情并将时间浪费在不重要的问题上。

• 如何实现 SSR
• 路由应该如何工作
• 分割这个 JS 包的最佳方法是什么
• 应用程序配置应该如何工作
• 如何在构建时构建网站

Next.js 对所有这些问题都有答案。

这意味着，作为开发人员，我们可以专注于与项目领域相关的问题。有主见的框架使我们能够专注于产品。

总的来说，这节省了我们开发人员的时间、公司的金钱，并避免了我们的大脑的决策疲劳。

持续改进（通过开源）

由于 Next.js 是开源的，我们可以从每个个人或公司对框架所做的改进中受益。

我不会亲自解释开源软件的好处，而是让这个“像我五岁一样解释”（ELI5）Reddit 线程来解释。

结论是：通过共同努力，我们可以加倍努力，构建出比单独行动更好的软件。

阅读下面的完整评论👇

r/explainlikeimfive - ELI5：什么是开源软件以及它为什么如此重要？

Next.js 的缺点

如果您是 Next.js 生态系统的新用户，您可能不会发现这些功能像以前那样备受争议。如果您已经使用过一段时间，让我们一起回顾一下。

框架鞭笞

如果团队认真倾听并接受开发人员的反馈，那么必然会有一些改变。

一些值得注意的变化是：

• 从 SSR 优先转向 SSG
• 删除自定义服务器的托管支持
• 添加api函数

Next.js 团队在听取开发者反馈后添加了这些更改。问题是，一些开发者已经想出了应对这些问题的“创可贴”。多年后，这些开发者仍在处理框架早期遗留下来的“创可贴”（又称“技术债务”）。

框架鞭策是所有快速发展的框架的常见问题，Next.js 肯定也是如此。

有些人不喜欢基于文件的路由（或其他观点）

React 留下的空白之一是路由。由于他们专注于 MVC 的“V”（视图）部分，因此出现了许多处理路由的不同选项。

不支持开箱即用的React Router是 Next 最初采取的一个有争议的立场。

虽然市面上有很多适用于 React 的优秀路由器，但我认为 Next Router 是一个不错的选择。基于文件的路由对于新开发者和 Next.js 专家来说都很容易理解。

正如我之前所说，Next.js 拥有意见可以节省我们的时间并使我们避免争论细节。

getInitialProps 可能比较棘手

Next.js 为 React 范式添加了许多便捷方法：

• 获取初始属性
• 获取静态属性
• 获取静态路径
• 获取服务器端属性
• 报告WebVitals

我同意它们可能很难学。但我百分之百认为它们值得学习。它们会极大地提高你的工作效率，而且团队还整理了非常棒的支持文档。

什么事？

盖茨比

Gatsby 是一款很棒的工具——我的个人网站和文章就是用它创建的。我仍然在大多数产品上选择 Next.js 的原因是 Next 可以同时处理 SSG 和 SSR。

我什么时候还会选择 Gatsby？如果我正在构建一个内容网站，并找到了一个我非常喜欢的 Gatsby 主题。Gatsby 的主题和插件生态系统非常棒。我曾经在 Gatsby 主题的帮助下创建了我的个人网站。

叙事/盖茨比主题小说

Vue 和 Nuxt

我听说 Vue 和 Nuxt 都很棒。我以后一定会去探索它们。我很想听听你使用 Nuxt 的经验。

创建 React 应用

是时候回答这个古老的问题了：我不能只使用 create-react-app 吗？

是的，请随意。Create-react-app 是一个很棒的工具。

在继续深入之前，请重读一下这篇文章的“我有一个应用创意”部分。如果您认为在项目的任何时候都需要 SSR 或 SSG，我建议您首先从 Next.js 开始。

结论

Next.js 是一个优秀的框架，适合 React 开发者构建静态或服务器端渲染的网站。React 的流行推动了 Next 的发展。Next.js 团队用优雅的解决方案解决了常见问题，这些解决方案几乎堪比魔法。

成为一名开发人员真是一个好时机。

新闻通讯插件

希望你喜欢这篇分析。我每月都会发布一篇类似的长文，并在其他几周发布更多关于 Next.js 的简短更新。

以下是上周的：

嘿——我们来谈谈静态网站

让我们深入了解 Next.js 9.4.0 以来的所有版本，包括金丝雀提交。本文还将介绍 JAMstack 函数，它是构建 Next.js 应用的实用资源。

感谢阅读！