去年离职后，不想再打工，准备自己先做个网站。

之前虽是全栈开发，但主要还负责前端管理这块，所以就准备开始试着，直接使用JS做前后端。

所以就找到了Next.js。

我使用的版本是Next14，但由于版本较新，资料基本是英文的。所以这边主要是参考了英文的在线文档，进行翻译。

也顺便一边翻译，一边整理。

现在网站已经运营了三个月，准备把之前的资料整理下，发成文章。

正文开始

---

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

让我们花一些时间扩展一下 React 和 Next.js 是什么，以及它们如何帮助您构建 Web 应用程序。

Web应用程序的构建基础

我们在构建新的应用程序时，一般需要提前考虑一些事项。如：

• 用户界面 - 用户将如何使用您的应用程序并与之交互。
• 路由 - 用户如何在应用程序的不同页面之间跳转。
• 数据获取 - 您的数据所在的位置以及如何获取数据。
• 渲染 - 渲染静态或动态内容的时间和位置。
• 集成 - 您使用哪些第三方服务（用于CMS、身份验证、支付等）以及您如何连接到它们。
• 基础结构 - 部署、存储和运行应用程序代码（无服务器、CDN、边缘等）的位置。
• 性能 - 如何为最终用户优化应用程序。
• 可伸缩性 - 应用程序如何随着团队、数据和流量的增长而进行调整。
• 开发人员体验 - 您的团队在构建和维护应用程序方面的经验。

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

什么是React？

这个简单说下，React是一个用于构建交互式用户界面的 JavaScript 库。

用户界面 （UI） 是指用户在屏幕上看到并与之交互的元素。

React提供了很多的函数 （API） 来构建 UI，但让开发人员方便在他们的应用程序中使用这些函数。

React 成功的部分原因在于，除了UI部分外，它的架构很松耦合，兼容性也很好。

这让包括Next.js在内的第三方工具和解决方案蓬勃发展，构建了完整的生态系统。

然而，这也意味着从头开始构建一个完整的 React 应用程序需要一些时间和基础。

开发人员需要花时间配置工具并重新设计解决方案，以满足常见的应用程序需求。

什么是Next.js？

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

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

您可以使用 React 构建 UI，然后逐步采用Next.js功能来解决常见的应用程序需求，例如路由、数据获取和缓存，同时改善开发人员和最终用户的体验。

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