Create Next.js App

注意：需要 Node.js 18+

创建一个 Next.js 项目：

npx create-next-app@latest

要从头开始使用 React 构建一个完整的 Web 应用程序，需要考虑许多重要的细节：

• 必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。
• 你需要针对生产环境进行优化，例如代码拆分。
• 你可能需要对一些页面进行预先渲染以提高页面性能和 SEO。你可能还希望使用服务器端渲染或客户端渲染。
• 你可能必须编写一些服务器端代码才能将 React 应用程序连接到数据存储。

一个 框架 就可以解决上述这些问题。试试 Next.js 吧，这是一个可用于生产环境 Web 开发的 React 框架。Next.js 为上述所有问题提供了解决方案。

Build Time

构建阶段是应用代码准备投入生产环境的一个必要阶段，当你 构建应用 时，Next.js 会将你的代码转换成 优化过的生产环境文件，以准备部署到服务器进行访问，这些文件包括：

• 静态生成页面的 HTML 文件；
• 用于 在服务器上使页面渲染的 JavaScript 代码；
• 用于 在客户端上使页面交互的 JavaScript 代码；
• CSS 文件。

Next.js 提供了开发和生产两个阶段的特性，例如：

• 在开发阶段，Next.js 为开发者以及应用的构建进行了优化，这提高了开发者的开发体验，例如内置 TypeScript、集成 ESLint、更快的刷新速度等；
• 在生产阶段，Next.js 为 App 使用者提供了优化和使用体验。

一个 App 从 Dev 到 Prod 需要做很多事情，例如，代码需要经过以下几个阶段：compile(编译) -> bundle(捆绑) -> minify(压缩) -> code split(代码分离)。

在创建第一个 Next.js App 之前，先来看看 Next.js 是如何工作的，与 React 项目相比，它有哪些不同？我将从以下几个方面来探讨：

• 代码运行环境：开发环境 Dev or 生产环境 Prod；
• 代码运行阶段：构建时 Build Time vs 运行时 Runtime；
• 在哪儿渲染：客户端 Client vs 服务端 Server。

What is Rendering?

渲染指将 React 代码转换成 HTML 表示形式的用户界面。渲染可以在服务端或客户端上进行，发生在构建阶段之前或者在运行阶段的请求时。

在 Next.js 中有三种渲染方式：

• 服务端渲染；
• 客户端渲染；
• 静态网站生成。

Pre-Rendering

服务端渲染和静态网站生成也被称为预渲染，因为 外部数据的获取和将 React 组件转换成 HTML 都发生在结果发送到客户端之前。