跳到内容

1

关于 React 和 Next.js

Next.js 是一个灵活的 React 框架,它为您提供构建快速、全栈 Web 应用程序的构建块。

但这究竟是什么意思呢? 让我们花一些时间扩展一下 React 和 Next.js 是什么,以及它们如何帮助您构建 Web 应用程序。

Web 应用程序的构建块

在构建现代应用程序时,您需要考虑一些事项。例如

  • 用户界面 - 用户将如何使用您的应用程序并与之互动。
  • 路由 - 用户如何在应用程序的不同部分之间导航。
  • 数据获取 - 您的数据存储在哪里以及如何获取它。
  • 渲染 - 您何时以及在何处渲染静态或动态内容。
  • 集成 - 您使用的第三方服务(用于 CMS、身份验证、支付等)以及如何连接到它们。
  • 基础设施 - 您在何处部署、存储和运行您的应用程序代码(无服务器、CDN、边缘等)。
  • 性能 - 如何为最终用户优化您的应用程序。
  • 可扩展性 - 当您的团队、数据和流量增长时,您的应用程序如何适应。
  • 开发者体验 - 您的团队构建和维护应用程序的体验。

对于应用程序的每个部分,您都需要决定是自己构建解决方案还是使用其他工具,例如软件包、库和框架。

什么是 React?

React 是一个用于构建交互式用户界面的 JavaScript

用户界面 (UI) 指的是用户在屏幕上看到并与之互动的元素。

User Interface example showing a browser window with a navigation, a sidebar, and a list of posts

库的意思是 React 提供了有用的函数 (API) 来构建 UI,但由开发者决定在应用程序中的何处使用这些函数。

React 成功的部分原因在于,它对构建应用程序的其他方面相对不带主观意见。 这导致了第三方工具和解决方案的蓬勃发展,包括 Next.js。

然而,这也意味着从头开始构建一个完整的 React 应用程序需要一些努力。 开发者需要花费时间配置工具并为常见的应用程序需求重新发明解决方案。

什么是 Next.js?

Next.js 是一个 React 框架,它为您提供构建 Web 应用程序的构建块。

框架的意思是 Next.js 处理 React 所需的工具和配置,并为您的应用程序提供额外的结构、功能和优化。

Diagram showing how Next.js spans the server and client, and provides additional features such as routing, data fetching, and rendering.

您可以使用 React 构建 UI,然后逐步采用 Next.js 功能来解决常见的应用程序需求,例如路由、数据获取和缓存 - 所有这些都在改善开发者和最终用户体验的同时进行。

无论您是个人开发者还是大型团队的一员,您都可以使用 React 和 Next.js 构建完全交互式、高度动态且高性能的 Web 应用程序。

在接下来的章节中,我们将讨论如何开始使用 React 和 Next.js。

您已完成章节1

既然您已经了解了 React 和 Next.js 是什么。

下一步

2:渲染用户界面 (UI)

了解用户界面 (UI) 在浏览器中如何渲染的基础知识。