当我第一次涉足 Web 开发世界时，我被 React 的强大功能和多功能性所吸引。

作为最受欢迎的库之一，它似乎是构建动态用户界面的首选。

然而，随着我的项目变得越来越复杂，我发现自己面临着挑战我的效率和可扩展性的限制。

就在那时，我发现了 Next.js——一个基于 React 构建的框架，它不仅解决了它的许多缺点，而且还提升了我的开发流程。

Next.js 结合了 React 的最佳功能，同时添加了出色的功能层，例如服务器端渲染和静态站点生成。

凭借其优化性能和增强 SEO 的能力，它很快成为我提供卓越用户体验的秘密武器。

在这篇文章中，我将分享为什么 Next.js 可能是您下一个项目的理想选择，重新定义您的开发方式。

无论您是经验丰富的专业人士还是刚刚起步，了解 Next.js 的优势都可以改变您的工作流程，并使您在不断发展的行业中脱颖而出。

Next.js 和 React 之间的主要区别

虽然两者都是基于 JavaScript 构建的，但它们的功能和特性可能存在很大差异。

那么，真正的情况是什么？

服务器端渲染 (SSR)

什么是服务器端渲染？

服务器端渲染（SSR）是服务器在每次请求时生成网页完整 HTML 内容的一种方法。

这与客户端渲染（CSR）形成鲜明对比，后者是由浏览器获取最小的 HTML 文档，然后由 JavaScript 来动态渲染内容。

可以把 SSR 想象成服务器是一位尽心尽力的大厨，在美食上桌前精心准备，而 CSR 就像一位家庭厨师，需要在厨房里把饭菜一件件组装起来。

Next.js 中 SSR 的优势

• 改进的搜索引擎优化(SEO)： SSR 最大的好处之一是它对 SEO 的积极影响。由于服务器提供了完全呈现的页面，因此 Google 等搜索引擎可以更有效地抓取您的内容。更好的能见度意味着更多的流量。这就像在拥挤的房间里有一个扩音器来放大你的声音！

• 更快的初始加载时间： SSR 可以显着缩短初始加载时间。通过向客户端发送完全渲染的页面，用户可以立即查看内容 - 无需等待 JavaScript 启动。在用户注意力像金鱼一样集中的时代，每一毫秒都很重要！

与 React 的客户端渲染（CSR）的比较

虽然 React 的 CSR 获取数据并将其呈现在客户端，但它可能会导致初始加载速度变慢。

缺点是什么？

Google 和其他搜索引擎可能很难有效地呈现和索引您的内容。

因此，在 SSR 与 CSR 的战斗中，SSR 在 SEO 和速度方面获胜。

静态站点生成 (SSG)

什么是静态站点生成？

静态站点生成 (SSG) 是在构建时预渲染页面的过程。

SSG 不是像 SSR 那样对每个请求进行服务器渲染，而是在初始构建期间编译页面，创建可以立即提供服务的静态 HTML 文件。

就像提前烘烤饼干一样，为客人做好准备——无需等待！

Next.js 中 SSG 的优势

• 在构建时预渲染页面： 这意味着您网站上的每个页面都是提前生成的，从而实现超快的加载时间。这比咖啡瘾君子跑到最近的咖啡馆还要快！
• 改进的性能和搜索引擎优化： 与 SSR 相似，SSG 也得益于搜索引擎优化所需的更高性能。由于所有内容都是静态提供的，因此网页加载速度很快，用户和搜索引擎都很满意。速度越快，用户就越高兴，而高兴的用户更有可能转化为客户！

与 React 方法的比较

虽然 React 通常会依赖 CSR 或其他库来实现 SSG 功能，但它通常会导致复杂的配置或确保维持性能的挑战。

相比之下，Next.js 采用 SSG 并将其作为核心功能，提供开箱即用的简单、高性能解决方案。

内置路由

Next.js 带有一个强大的内置路由系统。

React 需要使用 React Router 等外部路由库，而 Next.js 则不同，它支持基于文件的路由，其中页面结构直接与文件系统绑定。

如果您创建一个名为 about.js 的文件，它将自动成为您的 /about 页面。

这就像拥有一个神奇的目录，可以为您整理所有内容！

内置路由的优点

• 简化的导航设置： 有了 Next.js 的路由系统，导航设置就变得简单明了。无需再进行手动配置，只需创建文件，然后就可以了！你就有了一条新路由。
• 动态路由功能： Next.js 不仅提供基本路由，还提供动态路由，使您能够根据参数创建页面，非常适合博客、电子商务商店等。

与 React Router 的比较

React Router 可能会给你很多可定制性，但随之而来的是复杂性。

设置它可能会让人不知所措，尤其是对于 Web 开发的新手来说。

与此同时，Next.js 消除了麻烦并提供了开箱即用的解决方案 - 对于那些想要专注于编写代码而不是配置路由的人来说非常有用。

性能优势

在构建现代 Web 应用程序时，性能至关重要。

随着越来越多的用户期待快速、无缝的体验，我知道每一毫秒都很重要。

这就是我将注意力转向 Next.js 的原因——它不仅仅是对 React 的渐进式改进；它还是 React 的渐进式改进。它是一个性能强大的平台。

让我们深入研究 Next.js 让 React 望尘莫及的两个关键领域：自动代码分割和图像优化。

自动代码分割

首先，我们来谈谈代码分割。

我记得当我第一次知道它的时候；我想象着像厨师准备最好的寿司一样愉快地切割我的 JavaScript 包。

但代码分割到底是什么？

简而言之，它是将 JavaScript 文件分解为更小、更易于管理的块的技术。

这意味着仅加载特定页面所需的代码，从而使您的应用程序更加快捷。

Next.js 如何自动处理代码分割

Next.js 最好的部分是它会自动为您处理代码分割。

我的意思是，谁不喜欢一点魔法呢？

当您在 Next.js 应用程序中创建新页面时，它会自动为该页面生成单独的包。

因此，当用户导航到新页面时，只会下载相关代码。

这大大减少了加载时间。

相比之下，对于 React，代码分割感觉就像是一场寻宝游戏。

虽然像 React.lazy 和 React.Suspense 这样的工具可以提供帮助，但设置它们需要更多的手动干预 - 老实说，谁有时间这样做？

此外，特定的配置和条件可能会使该过程变得复杂，从而导致潜在的陷阱，从而减慢您的速度。

与 React 相比的性能改进

这种自动代码分割的影响是巨大的。

SpeedCurve 的一项研究发现，利用 Next.js 进行架构的网站的页面加载时间最多可减少 50%。

这可不是一件小事！

想象一下，您的用户轻松浏览您的网站，而您的竞争对手则因臃肿的捆绑包而不堪重负。

图像优化

接下来，我们来讨论 Next.js 的另一个亮点领域：图像优化。

在当今世界，图像可以成就或破坏用户体验。

然而，它们越大越重，您的网站就会变得越慢。

值得庆幸的是，Next.js 具有内置的图像优化功能，可以省去让您的照片恰到好处的麻烦。

Next.js 提供了一个图像组件，可以在多个方面自动优化图像：它以最佳格式提供图像，适当调整图像大小，并提供开箱即用的延迟加载。

通过使用正确的格式（如 AVIF 或 WebP），它可以确保您的图像不仅美观而且轻巧。

想象一下必须手动优化 React 应用程序中的图像。

当然，您可以使用 Cloudinary 或 Imgix 等工具，但这会增加复杂性并增加您的工作量。

另外，您必须记住正确设置所有内容，以免您的图像最终与您的预期完全相反 - 减慢您的网站速度而不是加快速度！

与 React 中手动优化的比较

另一方面，在 React 应用程序中手动管理图像优化非常耗时，并且通常会导致错过性能增强的机会。

我经常看到开发人员忽视图像优化，而是专注于开发中更迷人的方面。

有了 Next.js，一切都会自动处理，让您专注于构建应用程序的有趣部分。

总之，当您权衡 Next.js 与 React 的选项时，性能优势非常引人注目。

通过自动代码分割和无缝图像优化，Next.js 使您能够提供闪电般快速、用户友好的体验。

我不了解你的情况，但我宁愿花时间编写创新功能，也不愿花时间调整性能。

Next.js 使这成为可能。

开发经验

我了解到，开发经验可以决定一个项目的成败。

这就是为什么我想讨论为什么使用 Next.js 而不是 React 可能会成为你下一个项目所需的游戏规则改变者。

简化的设置和配置

让我们切入正题：开始使用 Next.js 就像拥有一个可供您使用的精灵。

借助 Next.js，您只需轻轻一挥手腕即可启动新项目。

只需一个简单的命令：

npx create-next-app my-next-app

就是这样！

大约五分钟后，您就可以开始运行了。

相比之下，如果我要建立一个标准的 React 项目，我需要跳过更多的环节：配置 Webpack、Babel 以及可能的数十个其他库，只是为了创建一个正常运行的应用程序。

这就像选择一家五星级餐厅，却发现你还必须成为厨师！

Next.js 带有大量内置功能，可以减少对外部库的需求。

以下是一些亮点：

• 路由：Next.js 允许基于文件的路由。将文件放入页面目录中，瞧！您已经创建了一条路线。将此与 React 进行对比，在 React 中，您必须通过像 React Router 这样的库来设置路由。这感觉有点像在没有手册的情况下组装宜家书架。
• API 路由：需要快速后端？ Next.js 允许您直接在应用程序中定义 API 路由。因此，如果您正在创建一个简单的应用程序，则无需启动单独的服务器或管理单独的依赖项。
• 静态站点生成 (SSG)：我喜欢 Next.js 开箱即用地启用 SSG。这可以从一开始就实现更快的加载时间和改进的 SEO，而无需配置任何特殊的内容。

根据 Stack Overflow 的一项调查，67.2% 的开发者更喜欢设置复杂度较低的项目。

这引起了我的共鸣，因为没有人愿意花比实际编码更多的时间来排除配置故障。

增强的开发者工具

说到编码，我们来谈谈工具。

拥有正确的工具可以为您的开发体验创造奇迹。

Next.js 拥有一套开发人员工具，可以提高我的工作效率并使调试变得轻而易举。

• 快速刷新：此功能允许在您的应用程序中进行即时反馈。当我对组件进行更改时，我可以获得实时更新，而不会丢失组件状态。对于开发人员来说，它相当于拥有一台速溶咖啡机——快速且令人满意！
• 错误报告：Next.js 提供在开发过程中弹出的内置错误覆盖。我可以直接在屏幕上阅读清晰的错误消息，而不是浏览控制台，直接引导我找到问题的根源。
• TypeScript 集成：对于那些喜欢 TypeScript 的人（我知道我喜欢），Next.js 具有无缝的 TypeScript 支持。您可以像使用 JavaScript 一样轻松地开始 TypeScript 项目，并且您将获得完整的类型检查功能。

现在，我们来做一个简单的比较。

React 开发工具很棒，但它们主要关注组件树和状态管理。

它们缺乏像 Next.js 那样有助于简化开发工作流程的内置功能。

根据我的经验，这些工具使我能够将开发时间缩短约 30%，从而在不牺牲质量的情况下加快发布速度。

老实说：在快节奏的数字世界中，如果您能在这里或那里节省几个小时，那么您就已经领先于竞争对手。

总之，如果您热衷于简化设置过程并利用强大的开发工具，Next.js 提供了坚实的基础，可以消除构建 Web 应用程序的痛苦。

Next.js 不仅承诺了未来，还提供了令人愉悦的开发体验。

总之，虽然 React 仍然是构建动态用户界面的首选，但 Next.js 提供了一整套高级功能，可以大大提高项目的性能和用户体验。

服务器端渲染、静态网站生成和内置路由等优势让 Next.js 脱颖而出，成为开发人员和用户的不二之选。

我亲眼目睹了 Next.js 的自动代码拆分和优化的图片处理是如何加快加载速度和提高搜索引擎优化效果的，尤其是在电子商务网站等复杂的应用中。

展望我自己的项目，我越来越倾向于使用 Next.js。

其简化的设置、增强的开发人员工具和令人印象深刻的性能不仅改善了我的工作流程，还改善了最终用户体验。

如果您的目标是创建一个脱颖而出的 Web 应用程序（无论是速度、SEO 还是整体性能），我鼓励您探索 Next.js 作为您的下一个努力。

它可能就是您一直在寻找的游戏规则改变者。

---

原文：https://javascript.plainenglish.io/why-you-should-use-nextjs-over-react-for-your-next-project-f5949dc43588