跳至内容

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 提供了构建 UI 的有用函数 (API),但将这些函数在应用中使用的位置留给开发者决定。

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) 在浏览器中如何渲染的基本原理。