版本:
本系列next.js基于的是目前最新版本的 v14 版本,需要 Node.js 18.17 及以后版本
创建项目:
最快捷的创建 Next.js 项目的方式是使用 create-next-app
脚手架,你只需要运行:
npx create-next-app@latest&&pnpm create next-app&&yarn create next-app
文件目录及其启动命令
开发的时候使用 npm run dev
。
部署的时候先使用 npm run build
构建生产代码,再执行 npm run start
运行生产项目。
运行 npm run lint
则会执行 ESLint 语法检查。
执行 next build
将会创建项目的生产优化版本:输出如下
从上图可以看出,构建时会输出每条路由的信息,比如 Size 和 First Load JS。注意这些值指的都是 gzip 压缩后的大小。其中 First Load JS 会用绿色、黄色、红色表示,绿色表示高性能,黄色或红色表示需要优化。
这里要解释一下 Size 和 First Load JS 的含义。正常我们开发的 Next.js 项目,其页面表现类似于单页应用,即路由跳转(我们称之为“导航”)的时候,页面不会刷新,而会加载目标路由所需的资源然后展示,所以:
加载目标路由一共所需的 JS 大小 = 每个路由都需要依赖的 JS 大小 + 目标路由单独依赖的 JS 大小
其中:
- 加载目标路由一共所需的 JS 大小就是
First Load JS
- 目标路由单独依赖的 JS 大小就是
Size
- 每个路由都需要依赖的 JS 大小就是图中单独列出来的
First load JS shared by all
First Load JS = Size + First load JS shared by all
使用官方文档中的介绍就是:
Size
:导航到该路由时下载的资源大小,每个路由的大小只包括它自己的依赖项First Load JS
:加载该页面时下载的资源大小First load JS shared by all
:所有路由共享的 JS 大小会被单独列出来