Next.js 是一个全栈 React 框架，专门用于开发 Web 站点，可简可繁。下到纯静态博客，上到复杂的动态站点，都能驾驭。也是 React 团队推荐使用 的，由 Vercel* 公司创建并维护。

官网地址：https://nextjs.org/

* Vercel 是一家云计算公司，提供基于云的前端开发和部署工具。他们的使命是使 Web 开发更快、更简单，同时提供高效的性能和安全性。

创建起来也特简单，装好 Node 环境，执行下面语句就行：

不过，为了更好的认识 Next.js，我们将从头学习如何将一个 React 项目转换成 Next.js 站点。

一个包含简单 React 项目的 HTML 网页

接下来，我们将学习如何将这个 HTML 网页转化成一个 Next.js 站点。

逐步创建一个 Next.js 站点

添加依赖包

一个 Next.js 至少包含 3 个依赖：react、react-dom及next。

注意：为了节省硬盘空间，我这里使用 pnpm 这个包管理器，没安装的可以通过 npm install -g pnpm 指令安装。

修改 HTML 文件

1. 只保留 <script type="text/babel"> 里的内容

2. 将 .html 改成 .jsx 后缀，并放入 pages 目录

3. 从 react 包中引入 useState（import { useState } from "react"），将 React.useState 改为 useState

4. 移除 ReactDOM.render() 相关代码，导出<HomePage> 组件（作为默认导出）

pages/index.jsx

增加启动脚本

修改 package.json，增加启动脚本。

启动开发服务器

运行命令 pnpm run dev，浏览器访问 localhost:3000，现在就能享受到热更新特性了（英文“Fast Refresh”，即修改组件代码后，无需刷新，也不会丢失组件状态，就能享受更新）。

进一步学习

可以从 Next.js 的工作原理（地址：https://nextjs.org/learn/foundations/how-nextjs-works） 开始，学习使用 Next.js 时会涉及到的一些概念及对应用法。