乘风破浪，遇见未来元宇宙(Metaverse)之面向效率至上的利器Next.js，开启元宇宙时代的前端开发
什么是Next.js
https://www.nextjs.cn
这是一个用于生产环境的React框架
Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。
为什么选择Next.js
全球领先的公司都在使用并喜爱Next.js
理由
要从头开始使用React构建一个完整的Web应用程序，需要考虑许多重要的细节：
- 必须使用打包程序(例如WebPack)打包代码，并使用Babel等编译器进行代码转换。
- 你需要针对生产环境进行优化，例如代码拆分。
- 你可能需要对一些页面进行预先渲染以提高页面性能和SEO。你可能还希望使用服务器端渲染或客户端渲染。
- 你可能必须编写一些服务器端代码才能将React应用程序连接到数据存储。
一个框架就可以解决上述这些问题。但是，这样的框架必须具有正确的抽象级别，否则它将不是很有用。它还需要具有出色的"开发人员体验"，以确保您和您的团队在编写代码时拥有出色的体验。
Next.js具有同类框架中最佳的"开发人员体验"和许多内置功能。列举其中一些如下：
- 直观的、基于页面的路由系统（并支持动态路由）
- 预渲染。支持在页面级的静态生成(SSG)和服务器端渲染(SSR)
- 自动代码拆分，提升页面加载速度
- 具有经过优化的预取功能的客户端路由
- 内置CSS和Sass的支持，并支持任何CSS-in-JS库
- 开发环境支持快速刷新
- 利用Serverless Functions及API路由构建API功能
- 完全可扩展
Next.js被用于数以万计的的网站和Web应用程序，包括许多世界上许多最大的品牌都在使用Next.js。
特色
- 零配置
自动编译并打包。从一开始就为生产环境而优化。
- 混合模式：SSG和SSR
在一个项目中同时支持构建时预渲染页面(SSG)和请求时渲染页面(SSR)。
- 增量静态生成
在构建之后以增量的方式添加并更新静态预渲染的页面。
- 支持TypeScript
自动配置并编译TypeScript。
- 快速刷新
快速、可靠的实时编辑体验，已在Facebook级别的应用上规模上得到验证。
- 基于文件系统的路由
每个pages目录下的组件都是一条路由。
- API路由
创建API端点(可选)以提供后端功能。
- 内置支持CSS
使用CSS模块创建组件级的样式。内置对Sass的支持。
- 代码拆分和打包
采用由Google Chrome小组创建的、并经过优化的打包和拆分算法。
勤学实践
https://github.com/TaylorShi/demofornextjs
准备环境
a. 安装Git For Windows(可选)
https://git-scm.com
如果你电脑中还没有安装Git程序，那么需要先安装Git For Windows版本。
官方下载链接：Git-2.34.1-64-bit.exe
或者通过Winget安装：
winget install 'Git.Git'
安装过程没啥可说的，保持默认设置一路安装即可。
在Windows终端中，输入以下命令行可以试探git是否安装成功，并且查看其版本号。
git --version
b. 安装NodeJs环境(可选)
https://nodejs.org/zh-cn/
官方下载链接：node-v16.13.2-x64.msi
或者通过Winget安装：
winget install 'OpenJS.NodeJS.LTS'
安装过程没啥可说的，保持默认设置一路安装即可。
在Windows终端中，输入以下命令行可以试探NodeJs是否安装成功，并且查看其版本号。
npm --version
创建项目
https://www.nextjs.cn/learn/basics/create-nextjs-app
a. 前往工作空间
cd D:\TempSpace\
b. 创建demofornextjs项目
npx create-next-app demofornextjs --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
其中create-next-app是一个创建项目的工具，demofornextjs是项目的名字和文件夹名称，--example用来指定项目创建时使用的项目模板。
注意，根据NPM命名规则，项目名称中不能包括大写字母。
如果实在是创建失败，也可以移除demofornextjs项目后面的内容，同时需要检查项目模板引用位置是否正确，原文在：Create a Next.js app
创建成功之后，会看到如下信息(对于网络不好的童鞋，必要的情况下也许要开启V-N才行)：
我们可以查阅下首次创建的项目的文件结构
c. 运行demofornextjs项目
切换到项目目录
cd .\demofornextjs\
通过NPM的运行命令以开发模式运行项目
npm run dev
运行成功之后，我们会看到它开启了一个HTTP服务，端口号3000，接下来我们就可以打开看看了。
- http://localhost:3000
好了，我们第一个NextJs项目就创建成功了，非常简单。
d. 创建Git忽略清单文件
# NextJs自身目录
node_modules
.next
e. 编辑页面元素体验快速刷新
对NextJs来说，所有的页面都存放在pages目录下，那么我们看到的示例项目的首页自然也在这里，它就是pages下属的index.js文件。
我们找到它，并且编辑其中的Welcome to字样为Learn
保存后，我们看到终端控制台信息变动了一下，它检测到了文件变动，于是里面重新编译了一次，速度很快。
于此同时，浏览器页面也立即自我刷新了。
这正是NextJs开发服务器的"快速刷新"特性。
参考
- NextJsCn